Stretch child div height to fill parent that has dynamic height
The solution is to use display: table-cell
to bring those elements inline instead of using display: inline-block
or float: left
.
div#container { padding: 20px; background: #F1F1F1}.content { width: 150px; background: #ddd; padding: 10px; display: table-cell; vertical-align: top;}.text { font-family: 12px Tahoma, Geneva, sans-serif; color: #555;}
<div id="container"> <div class="content"> <h1>Title 1</h1>
<div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. <br>Sample Text. Sample Text. Sample Text. <br>Sample Text. <br> </div> </div> <div class="content"> <h1>Title 2</h1>
<div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div> </div></div>
How to stretch child div vertically to fill up parent div when parent div height is dynamic
Flexbox can do that.
.container { background-color: lightgray; display: flex; border: 1px solid red; width: 80%; margin: 1em auto;}
.blurb { flex: 1; padding: 2em;}
.decoration { display: flex; align-items: center; background-color: white; margin-right: 1em;}
<div class="container"> <div class="blurb"> Lorem ipsum... </div> <div class="decoration"> ✓ </div></div>
<div class="container"> <div class="blurb">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae accusantium, magni commodi repellendus quidem facilis doloremque perspiciatis, ab odio omnis deleniti, obcaecati maiores dolores? </div> <div class="decoration"> ✓ </div></div>
Div cover parent div with min-height
flexbox
may help.
Add these code to the .wrapper
:
display: flex;
align-items: stretch;
Remove height
and add width
to the child.
.wrapper {
background-color: grey;
min-height: 50vh;
display: flex;
align-items: stretch;
}
.child {
width: 100%;
background-color: blue;
color: white;
}
<div class="wrapper">
<div class="child">
Foo Bar!
</div>
</div>
How can I expand floated child div's height to parent's height?
For the parent
element, add the following properties:
.parent {
overflow: hidden;
position: relative;
width: 100%;
}
then for .child-right
these:
.child-right {
background:green;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
Find more detailed results with CSS examples here and more information about equal height columns here.
How to extend height of an element to the bottom of its parent element
You can do this easily with CSS Grid
.parent { background: #232323; height: 500px; display: grid; grid-template-rows: auto 1fr;}
h1 { color: white}
.child { padding: 50px; border: 3px solid red;}
<div class="parent"> <h1>*Some other content*</h1>
<div class="child"> <h1>*The content of the child element*</h1> </div></div>
How to stretch flex child to fill height of the container?
When using Flexbox, the major mistake is to start using height: 100%
all over.
We are used to that in many cases, though when it comes to Flexbox, it often breaks it instead.
The solution is simple, just remove the height: 100%
, and it will work automatically.
The reason it does, is for flex item in row direction (the default), the align-items
control the vertical behavior, and as its default is stretch
this just work as is.
Stack snippet
<div style='display: flex'>
<div style='background-color: yellow; width: 20px'>
</div>
<div style='background-color: blue'>
some<br> cool<br> text
</div>
</div>
How to force child div to be 100% of parent div's height without specifying parent's height?
NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721
I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.
Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.
Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.
Make div (height) occupy parent remaining height
Expanding the #down
child to fill the remaining space of #container
can be accomplished in various ways depending on the browser support you wish to achieve and whether or not #up
has a defined height.
Samples
.container { width: 100px; height: 300px; border: 1px solid red; float: left;}.up { background: green;}.down { background: pink;}.grid.container { display: grid; grid-template-rows: 100px;}.flexbox.container { display: flex; flex-direction: column;}.flexbox.container .down { flex-grow: 1;}.calc .up { height: 100px;}.calc .down { height: calc(100% - 100px);}.overflow.container { overflow: hidden;}.overflow .down { height: 100%;}
<div class="grid container"> <div class="up">grid <br />grid <br />grid <br /> </div> <div class="down">grid <br />grid <br />grid <br /> </div></div><div class="flexbox container"> <div class="up">flexbox <br />flexbox <br />flexbox <br /> </div> <div class="down">flexbox <br />flexbox <br />flexbox <br /> </div></div><div class="calc container"> <div class="up">calc <br />calc <br />calc <br /> </div> <div class="down">calc <br />calc <br />calc <br /> </div></div><div class="overflow container"> <div class="up">overflow <br />overflow <br />overflow <br /> </div> <div class="down">overflow <br />overflow <br />overflow <br /> </div></div>
Make div fill height of parent with dynamic sibling
Use flexbox with flex-direction column and a set min-height on your main, then allow the second child to grow and not the first
*{box-sizing:border-box}
main{ min-height:500px; display:flex; flex-direction:column}
.div1{ flex:0; height: 100px; /*for demonstration only, leave it undeclared (auto)*/ border:2px solid orange; color:orange}
.div2{ flex: 1 0 auto; border: 2px solid lightblue; color:lightblue;}
<main> <div class="div1"><p>image with dinamic height</div> <div class="div2"><p>div with information about the page</div></main>
Related Topics
How to Make a Div Expand Vertically to Wrap the Content Within It
Select Elements by Attribute in Css
How to Make Bootstrap Columns All the Same Height
Center a Column Using Twitter Bootstrap 3
Stopping a Css3 Animation on Last Frame
Why Does the Order of Media Queries Matter in Css
Are Eot, Ttf, and Svg Still Necessary in the Font-Face Declaration
Use of Xsl-Fo, Css3 Instead of Css2 to Create Paginated Documents Like Pdf
How to Resize an Image Dynamically With CSS as the Browser Width/Height Changes
Override Body Style for Content in an Iframe
Floating Elements Within a Div, Floats Outside of Div. Why
How to Disable Text Selection Highlighting
How to Remove Focus Border (Outline) Around Text/Input Boxes - Chrome
Using Regular Expression in Css