Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?
In the first case, you don't have any height defined so it's clear that the precentage height on child will fail.
From the specification:
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
min-height
is only a boundary and the height of your element still depend on its content. If you will have one that exceed 300px
the element will have more than 300px
.container {
background-color: red;
width: 500px;
min-height: 300px;
padding:10px;
}
.child {
background-color: blue;
width: 500px;
height: 400px;
animation:change 2s linear infinite alternate;
}
@keyframes change{
from {
height:100px;
}
}
<div class="container">
<div class="child">
</div>
</div>
percentage height to child inside of parent element with view port height does not work
There are two issues preventing your code from doing what you want:
- Class names cannot contain certain characters, like percent signs and as user 3in0 mentioned - square brackets which can be confused with the CSS attribute selector.
- Percentage heights are based on the parent's height, but not it's min/max height, which are not factored into the calculation. I assume you are using min-height given the classname, so your 90% child height will be 90% of auto (inital/default value). Auto essentially means 'whatever height you need' - 90% of auto = auto.
.min-h-80vh {
background-color: seagreen;
height: 80vh;
}
.h-90 {
background-color: coral;
height: 90%;
}
<div class="min-h-80vh">
<div class="h-90">test</div>
</div>
Why inner div is not taking 100% of parent div?
Its a bug when parent height is determined by min-height/max-height children with percentage heights are sized incorrectly.
Just use some other method to assign the height, may be fixed or by using flex or whatever. In following example I added display:flex;
to parent and flex: 1;
to child:
.full {
background: yellow;
display: flex;
height: 100%;
width: 100%;
position: absolute;
justify-content: center;
align-items: center;
}
.outer {
background: blue;
min-height: 100px;
min-width: 300px;
display: flex;
flex-direction:column;
}
.inner {
background: red;
height: 100%;
width: 100%;
flex:1;
}
<div class="full">
<div class="outer">
<div class="inner"></div>
</div>
</div>
Child with max-height: 100% overflows parent
When you specify a percentage for max-height
on a child, it is a percentage of the parent's actual height, not the parent's max-height
, oddly enough. The same applies to max-width
.
So, when you don't specify an explicit height on the parent, then there's no base height for the child's max-height
to be calculated from, so max-height
computes to none
, allowing the child to be as tall as possible. The only other constraint acting on the child now is the max-width
of its parent, and since the image itself is taller than it is wide, it overflows the container's height downwards, in order to maintain its aspect ratio while still being as large as possible overall.
When you do specify an explicit height for the parent, then the child knows it has to be at most 100% of that explicit height. That allows it to be constrained to the parent's height (while still maintaining its aspect ratio).
Child inside parent with min-height: 100% not inheriting height
This is a reported webkit (chrome/safari) bug, children of parents with min-height can't inherit the height property: https://bugs.webkit.org/show_bug.cgi?id=26559
Apparently Firefox is affected too (can't test in IE at the moment)
Possible workaround:
- add position:relative to #containment
- add position:absolute to #containment-shadow-left
The bug doesn't show when the inner element has absolute positioning.
See http://jsfiddle.net/xrebB/
Edit on April 10, 2014
Since I'm currently working on a project for which I really need parent containers with min-height
, and child elements inheriting the height of the container, I did some more research.
First: I'm not so sure anymore whether the current browser behaviour really is a bug. CSS2.1 specs say:
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.
If I put a min-height on my container, I'm not explicitly specifying its height - so my element should get an auto
height. And that's exactly what Webkit - and all other browsers - do.
Second, the workaround I found:
If I set my container element to display:table
with height:inherit
it acts exactly the same way as if I'd give it a min-height
of 100%. And - more importantly - if I set the child element to display:table-cell
it will perfectly inherit the height of the container element - whether it's 100% or more.
Full CSS:
html, body {
height: 100%;
margin: 0;
}
#container {
background: green;
display: table;
height: inherit;
width: 100%;
}
#content {
background: red;
display: table-cell;
}
The markup:
<div id="container">
<div id="content">
<p>content</p>
</div>
</div>
See http://jsfiddle.net/xrebB/54/.
Related Topics
Table Fixed Header and Scrollable Body
How to Open Link in a New Tab in Html
Is There a W3C Valid Way to Disable Autocomplete in a HTML Form
Centered Elements Inside a Flex Container Are Growing and Overflowing Beyond Top
How Do Search Engines Deal With Angularjs Applications
What's the Difference Between ≪B≫ and ≪Strong≫, ≪I≫ and ≪Em≫
Get the Value in an Input Text Box
Masonry-Style Layout Only With Css
Why Isn't Object-Fit Working in Flexbox
Is It Bad to Use !Important in a CSS Property
Border Curved CSS - Circle With Curved End
How to Reformat HTML Code Using Sublime Text 2
How to Use CSS to Surround a Number With a Circle
How to Apply CSS Page-Break to Print a Table With Lots of Rows
Make Page to Tell Browser Not to Cache/Preserve Input Values