This question already has an answer here:
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?
(1 answer)
Closed 6 months ago.
I know that in CSS a container with height: 100% should adapt the height of its parent container.
However, what happens if I put an element inside a container that has only a max-height property?
In this case, my container does not appear at all. You can find my experiment in this code pen: https://codepen.io/web265p3/pen/eYMwjgd
<body>
<div class="outer">
<div class="inner">
<div class="inner-inner"></div>
</div>
</div>
</body>
And the CSS:
.outer {
background-color: yellow;
height: 1000px;
width: 300px;
}
.inner {
min-height: 500px;
width: 200px;
background-color: green;
}
.inner-inner {
height: 100%;
width: 100px;
background-color: aqua;
}
You can find a div with a class .inner-inner there that has a height of 100%.
Its contained in another element with a min-height of 500px.
I expected the .inner-inner to be 500px high, but this is not the case. Its height is 0.
Okay, so probably the height of 100% only inherits if there is a real "height" property on the parent.
And indeed, if I add a height the inner-inner becomes visible, but not as expected.
It now fills the parent completely and does not inherit the height property, but suddenly the min-height!?? You can find this here: https://codepen.io/web265p3/pen/VwXJBQG
This is a counter intuitive behavior for me. Can you explain why the browser behaves so strange and inherits a min-height after my change?
The height: 100% attribute's percentage is calculated based on the containing block's height. And if that containing block doesn't have a specified and fixed height, then the percentage is invalid, and behind the scense it will default back to auto (which if the inner has no content, it will be zero).
So, for percentage height to work on an in-flow child, the parent must have a set height.
In your example, just setting a display method to the outer container, and then setting height to fill parent will fix your issue, here's an updated CodePen.
* {
box-sizing: border-box;
}
.outer {
background-color: yellow;
height: 1000px;
width: 300px;
}
.inner {
min-height: 500px;
width: 200px;
background-color: green;
display: flex;
}
.inner-inner {
height: fill;
width: 100px;
background-color: aqua;
}
<body>
<div class="outer">
<div class="inner">
<div class="inner-inner"></div>
</div>
</div>
</body>
max-height in the parent element isn't a sufficient basis for a percentage height in the child. Percentage height settings require a height setting on the parent element (and if that one is a percentage value, its parent again requires a height setting, and so on up to the html element...).
This is actually a bug: https://bugs.webkit.org/show_bug.cgi?id=26559 (obviously still not fixed)
There are several ways to get around this. For example:
.inner -> position: relative
.inner-inner -> position: absolute
OR
.inner -> height: 1px; min-height: 100%
Related
I'm trying to use percentage height with overflow-y:auto; and instead of creating a scroll bar on the side of the div, it's using the page scroll bar.
Here's an example of want I'm getting at: http://jsfiddle.net/hmwe2jty/
Is it possible to use this property with percent height?
TL;DR Use the viewport height/width instead of a percentage. Change 100% to 100vh, and you're done!
EDIT:
The percentages take the precentage of the parent element. For example:
console.log("Parent's width: " + document.getElementById("parent").offsetWidth);
console.log("Child's width: " + document.getElementById("child").offsetWidth);
#parent {
background: yellow;
width: 500px;
height: 150px;
}
#child {
background: orange;
width: 50%;
height: 100px;
}
<div id="parent">
<div id="child">
I am 250px wide!
</div>
</div>
The new CSS3 viewport units use the user's viewport as a base. For example:
console.log("Parent's width: " + document.getElementById("parent").offsetWidth);
console.log("Child's width: " + document.getElementById("child").offsetWidth);
#parent {
background: yellow;
width: 500px;
height: 150px;
}
#child {
background: orange;
width: 50vw;
height: 100px;
}
<div id="parent">
<div id="child">
My width is 50% of the user's viewport, regardless of the size of my parent!
</div>
</div>
Because the body element is a bit weird, it's default behaviour is to shrink to fit is contents. So:
body {
background: yellow;
border: 1px solid red;
}
The body element wraps around it contents, <br>
but the backgound just ignores this behaviour.
So, since the parent element is the body, you will need to use the new vw and vh units. Read a article on CSS Tricks
EDIT 2:
Another way to choose the viewport as parent would be to make the element's position either fixed or absolute. In that instance the parent would become the viewport, thus giving you the needed value.
use this css for div which height must dimensioned in percents of parent element:
.child {
position: absolute;
top: 10px;
bottom: 0px;
}
It is considering 100% of the parent, which is the body. Hence it occupies the height of complete space available. Specify height a lesser amount in % rather than 100 (if you specifically prefer percent). It is upto you what you chose.
This question already has answers here:
Why is percentage height not working on my div? [duplicate]
(2 answers)
Closed 1 year ago.
For example, in the fiddle below, I have a single flex div.
It appears that setting the height to 100% has no effect on the div.
A div is display block by default and takes up 100% of the width. But obviously the height behaves differently.
https://jsfiddle.net/02wtuzjp/1/
#expand{
display: flex;
height: 100%;
border: 1px solid red;
}
<div id = 'expand'>
</div>
This appears to be expected behavior as there is not content in the div.
https://css-tricks.com/almanac/properties/h/height/
One solution is to use the units vh or more particularly 100vh.
I'm not sure it this is the proper or best way, however.
An element with a percentage based height, needs a parent reference for it to base its height on. You can add:
html, body {
height: 100%;
}
And your element will be 100% of the height:
html,
body {
height: 100%;
}
#expand {
display: flex;
height: 100%;
border: 1px solid red;
}
<div id="expand">
</div>
Per your edit:
You can certainly use 100vh to set the height, but then that element will always be 100 percent of the height of the viewport..no matter it's containing element.
For example:
#random {
height: 50px;
}
#expand {
display: flex;
height: 100vh;
border: 1px solid red;
}
<div id="random">
</div>
<div id="expand">
</div>
You can see that the height of your expand element is 100vh tall and creates a scroll because the height is the height of viewport, not the remaining space.
Resources:
Article on Medium
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
Here is the link to my fiddle for reference.
.container {
background-color: gray;
position: relative;
padding: 20px;
height: 70%;
/* uncomment this and will work as expected */
/* height: 70px; */
}
.child1 {
width: 75%;
display: inline-block;
height: 100px;
}
.child2 {
background-color: green;
width: 75%;
float: right;
height: 100%;
}
<div class="container">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
Parent's height is 100px(can see in devtools) after calculation for child1.
Child2 is applied 100% height equaling to 100px, but in computed style(can see in devtools) it is showing 0px.
I am assuming it's because parent's height is calculated at run-time. Any help?
Because parent height is also in percentage. It will work in the following conditions:
Parent of your div has 100% height
Parent of your div has fixed height
Parent of your div has some content and due to which it has some height.
Currently, it does not know 100% of what.
Using a % value in height requires one of the following:
If all parent elements have a percentage height, ALL parent elements to have their height explicitly defined.
Otherwise, a parent element must have a fixed height (not a %).
The parent of your .container element probably doesn't have a height value defined, or the parent of that element, etc.
Remember that the html and body elements count too.
html, body
{
height: 100%;
}
HTML:
<div class="content">
<div class="card">
</div>
</div>
CSS:
.content {
min-height: 350px;
min-width: 320px;
max-width: 350px;
padding: 15px;
}
.card {
width: 100%;
height: 100%;
background-color: black;
}
http://jsfiddle.net/aJhEF/1/
When examined with console, it shows that .content has functioning width and height. Then why does the child element, with its width and height being set to 100% not fill out its parent's width and height?
Child elements don't inherit their parents min-height property
This is why the .card element has a height of 0
As far as width is concerned, .card does fill out it's parent's width.
Danield is right.
You might solve this by using relative and absolute positions, combined with a negative margin (to compensate the padding):
.content {
min-height: 350px;
min-width: 320px;
max-width: 350px;
padding: 15px;
position: relative;
}
.card {
width: 100%;
height: 100%;
background-color: black;
position: absolute;
margin: -15px;
}
Because you gave the parent a set padding.
Remove padding: 15px; to fill out the div.
padding is extra space at the inside of the elements borders. If you want space around the outside, use margin.
You stated that you wanted your child to fill out the parent element, and since padding it is extra space on the inside of the parent element, the child will not fill out it's parent as long as the padding is there.
Edit: The reason you don't see the results you wanted is because you have your element a min-height and min-width instead of actual sizes. You need to give this element set size (be it pixels or %). This is due to the fact that your child element doesn't inherit the min and max width/height of it's parent.
See JSFiddle
I have a parent div with a max height/width set. I was wondering if it's possible to set the two child divs to automatically adjust their height based on a percentage using just CSS?
HTML:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
CSS:
html, body {
height: 100%;
width: 100%:
}
#parent {
max-width: 400px;
max-height: 600px;
}
#top {
height: 30%;
}
#bottom {
height: 70%;
}
The intended implementation of this would be for a mobile display that fills the screen height proportionally without forcing a vertical scroll.
EDIT:
I now realize that height percentages of the parent will work if you have a fixed parent height. The question still stands as to whether there is a way just using CSS to allow for a flexible height that matches the screen size. It's seems like this will not be possible only using CSS and require JS intervention.
Theres nothing wrong with your code. Just adding a 100% height as well as width to the divs yields what you want. The max-width/height doesn't force any values (leaves height/width at auto). Here is a working fiddle:
http://jsfiddle.net/b6HVa/
#parent {
width: 100%;
height: 100%;
max-height: 600px;
max-witdh: 400px;
}
I think you are doing right, if anything going wrong, please show a demo. Or try to set
#top{max-height: 30%;}
#bottom{max-height: 70%;}
Or add min-height: {some value}px; to your div.