Im here because other similar questions couldn't help my particular problem.
I need right div
to be 100% height all the time, where the parent
height depends on left div
height which depends on content inside.
Here is the html:
<div class="container clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
Here is CSS:
.container{
min-height: 10px;
width: auto;
height: auto;
background-color: #eeeeee;
}
.left{
position: relative;
float: left;
min-height: 100px;
width: 50px;
background-color: #dddddd;
}
.right{
min-height: 20px;
position: relative;
float: left;
height: 100%;
width: 50px;
background-color: #dddddd;
}
.
.clearfix:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
Note:
I'm using clearfix
.
And if you can show your answer in jsfiddle
Here is jsFiddle http://jsfiddle.net/C9Kmx/32/
Answer: Set the 100% height for parents too If you will try the set the height of a div container to 100% of the browser window using the style rule height: 100%; it doesn't work, because the percentage (%) is a relative unit so the resulting height depends on the height of parent element's height.
Getting the child of a flex-item to fill height 100%Set position: absolute; on the child. You can then set width/height as required (100% in my sample).
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.
Make the right div position:absolute;
and make the parent div position:relative;
and then height:100%;
will work for the right div. Make sure you also adjust its x-position and width accordingly. In this example I gave it a left:50px
to make sure it appears to the right of the left column.
JSFiddle http://jsfiddle.net/e9mvD/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With