Make child div take max height
Solution 1
if overflow
is an option (which i feel makes your life easy here), here is a demo
Keeping HTML same, your css (2 line changes) below
.boxA {
width: 220px;
padding: 0px 3px 5px 5px;
float: left;
height: 100%;
margin-bottom: 0px;
border: solid 1px green;
overflow:hidden; /*added this*/
}
.boxB {
width: 420px;
padding: 0px 5px 5px 3px;
float: right;
height: 100%;
border: solid 1px red;
overflow:hidden;/*added this*/
}
Solution 2
The problem you are facing is :
.box-content
is set to 100% of it's parent but there is also the .box-header
that is inside the parent so .box-content
is pushed down and has to overflow (the size of .box-content
) to keep 100% height of it's parent.
I can suggest this css :
.box-content { height: 90%; }
.box-header {
position: relative;
background-color: green;
padding:11px 8px 5px;
color: white;
height:10%;
}
See this FIDDLE
Solution 3
You could set the parent divs to be scrollable in the event that the child div has a bigger height.
.boxA{ overflow:auto; }
.boxB{ overflow:auto; }
Quoter
Updated on July 05, 2022Comments
-
Quoter almost 2 years
I'm trying to make the
.box-content
div
take the max height there is left inside boxA/boxBdiv
. I got adiv
.box-header
and a.box-content
inside boxA/boxBdiv
. The.box-content
is sharing adiv
with the.box-header
.In this JSFiddle you can see that the
.box-content
is going outside it's parentdiv
.How can I solve this with pure CSS taking in account with these 2 rules:
- The height of the
.box-content
is stretchable (grow/shrink whenever window size changes); - The
.box-content
has a minimum height of 200px;
- The height of the
-
web-tiki over 10 yearsupdated the fiddle (forgot a coma that bugged the responsive height)
-
Quoter over 10 yearsTook me a while to get this working. Something else was messing it up. thanks!
-
Quoter over 10 yearsI knew that, but it was to illustrate what I was trying to accomplish :D got to say that the header needs to be fixed. A stretchable header looks very ugly. Thanks for your help! +1