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%;
}
Related
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%
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 3 years ago.
Why when I set div element height with percentage the element doesn't showing up?
Why max-height never showing up? (No matter if it's percentage or vh or px) ?
For example:
<body> <div></div> </body>
div {width:50%; max-height: 100px; background-color: blue;}. Another Example: div {width: 50%; height:20%; background-color:blue;}
Never showing up :( Thanks for help.
Even if an element has a max-height attribute, you still need to tell it to consume it, because the default is auto. So if you want it to consume all height up to a maximum height you placed, use:
height: 100%;
max-height: 100px;
This will be because the element outside the div has a height of 0.
In your example body has a height of 0 so any percentage of 0 is still 0.
If you give your body (or outside element) a height it will be seen.
.outerDiv {
height: 100px;
border: 1px solid black;
}
.innerDiv {
height: 50%;
background-color: lightblue;
}
<div class="outerDiv">
<div class="innerDiv">
I'm inside
</div>
I'm outside
</div>
This question already has answers here:
Maintain aspect ratio of div but fill screen width and height in CSS?
(9 answers)
Closed 7 years ago.
I have code like this:
<body>
<div class="parent">
<div class="children">
Some content here
</div>
</div>
</body>
And this CSS:
body {width:100%;height:100%}
.parent{background-color: grey;}
.children{width: 90%; text-align: justify;}
I want to make height of children equal to width of parent. Unfortunately - I do not know why. I tried to look in Internet, tried different solutions like children{width: 90%; text-align: justify;height: 100%;}, but they do not work. I know I can use table instead of this second div, but then this website won't be responsive on smaller devices, which is very importnat for me. Any suggestions?
In straight CSS there is no way to refer to another elements property values. In order to get the child to be the height of the width of the parent, you will need to use javascript.
When the page is done rendering, you will need to grab the width of the parent div using javascript and set the height of the child using that value.
You can do this in CSS 3 with viewport units (each vw is 1% of the width of the viewport):
#parent {
position: relative;
background: #aaa;
margin: 10px;
width: 50%;
}
#child1 {
height: 100px;
background: #333;
width: 100px;
margin: 10px;
}
#child2 {
height: 50vw;
width: 100%;
background: #f00;
}
}
<div id="parent">
<div id="child1"></div>
<div id="child2"></div>
</div>
The catch is you have to know what percentage of the viewport your parent is, although this shouldn't be too much of an issue if you're trying to make your design responsive.
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