make divs of different heights fill vertical space on new line
Your best option is to use Masonry
but if you insist on CSS only solution then you should use columns
Here is Demo
.wrapper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 0; /* Chrome, Safari, Opera */
-moz-column-gap: 0; /* Firefox */
column-gap: 0;
width: 100vw;
}
.wrapper div {
display: inline-block;
width: 100%;
vertical-align: top;
}
<div class="wrapper">
<div class="item" style="height: 400px; background-color: #ddd"></div>
<div class="item" style="height: 200px; background-color: #000"></div>
<div class="item" style="height: 200px; background-color: #ececec"></div>
<div class="item" style="height: 700px; background-color: #DC0F0F"></div>
<div class="item" style="height: 400px; background-color: #B429A2"></div>
<div class="item" style="height: 200px; background-color: #009EBA"></div>
<div class="item" style="height: 200px; background-color: #694141"></div>
<div class="item" style="height: 400px; background-color: #29B436"></div>
<div class="item" style="height: 200px; background-color: #74B2BD"></div>
<div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>
Make a div fill the height of the remaining screen space
2015 update: the flexbox approach
There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.
Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.
(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.
To check current support you can also see here:
http://caniuse.com/#feat=flexbox
Working example
With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.
html,body { height: 100%; margin: 0;}
.box { display: flex; flex-flow: column; height: 100%;}
.box .row { border: 1px dotted grey;}
.box .row.header { flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */}
.box .row.content { flex: 1 1 auto;}
.box .row.footer { flex: 0 1 40px;}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box"> <div class="row header"> <p><b>header</b> <br /> <br />(sized to content)</p> </div> <div class="row content"> <p> <b>content</b> (fills remaining space) </p> </div> <div class="row footer"> <p><b>footer</b> (fixed height)</p> </div></div>
Fill remaining vertical space - only CSS
You can do this with position:absolute;
on the #second
div like this :
FIDDLE
CSS :
#wrapper{
position:relative;
}
#second {
position:absolute;
top:200px;
bottom:0;
left:0;
width:300px;
background-color:#9ACD32;
}
EDIT : Alternative solution
Depending on your layout and the content you have in those divs, you could make it much more simple and with less markup like this :
FIDDLE
HTML :
<div id="wrapper">
<div id="first"></div>
</div>
CSS :
#wrapper {
height:100%;
width:300px;
background-color:#9ACD32;
}
#first {
background-color:#F5DEB3;
height: 200px;
}
CSS vertical align with different image heights
These codes will guide you. and for bottom section can use flex too (width=50%) there is no need for float left.
.main-wrapper {
border: 1px solid red;
width: 75%;
margin: 0 auto 0 auto;
}
.main-wrapper .p-c-top {
display: flex;
width: 100%;
}
.main-wrapper .p-c-top .content-col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid red;
width: 33.333%;
}
.main-wrapper .p-c-top .content-col img {
width: 100%;
}
<div class="main-wrapper">
<div class="p-c-top">
<div class="content-col">
<img src="https://ir-uk.amazon-adsystem.com/e/ir?t=lawncarepro-21&language=en_GB&l=li2&o=2&a=B0099LETKS" alt="Sample Image">
</div>
<div class="content-col">
<h4>overal value</h4>
<p>stars</p>
</div>
<div class="content-col">
<h4>price</h4>
<p><a href="#">check on amazon</a></p>
</div>
</div>
<div class="p-c-bot"></div>
</div>
Fill remaining vertical space with CSS using display:flex
Make it simple : DEMO
section { display: flex; flex-flow: column; height: 300px;}
header { background: tomato; /* no flex rules, it will grow */}
div { flex: 1; /* 1 and it will fill whole space left if no flex value are set to other children*/ background: gold; overflow: auto;}
footer { background: lightgreen; min-height: 60px; /* min-height has its purpose :) , unless you meant height*/}
<section> <header> header: sized to content <br/>(but is it really?) </header> <div> main content: fills remaining space<br> x <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> <!-- uncomment to see it break --> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> <!-- --> </div> <footer> footer: fixed height in px </footer></section>
Have flexbox fill up vertical space of browser for sidemenu
With your initial code sample, all you need is to also give .container
a height.
.container, .wrapper, html, body { height:100%; margin:0;}
.wrapper { display: flex; flex-direction: column;}
.row3 { background-color: green; flex:2; display: flex;}
<div class="container"> <div class="wrapper"> <div class="row3">Option One</div> <div class="row3">Option Two</div> <div class="row3">Option Three</div> </div></div>
Related Topics
CSS Attribute Selector: Apply Class If Custom Attribute Has Value? Also, Will It Work in IE7+
Should I Remove Vendor Prefixes
Flex-Box 100Vh Stretches Behind Mobile Safari Chrome - Are There Any Known Tricks or Solutions
Hover Style Can Not Apply When Press Mouse Button in Chrome
Advanced CSS Selector - Select Based on Styling
CSS - Calc() on Font-Size - Changing Font Size Based on Container Size
Vertically Center HTML Element Within a Div of Dynamic Height
Why Is a Div with "Position: Absolute" Not by Default Relative to the Document
Do You Plan to Support Ie 6 on Your Future Projects
Edge Customize Cursor Doesn't Work
Style Every Thing Except First Child
Width Transitioning from Fixed Size to "Auto" Using CSS Without JavaScript
IE8 Doesn't Zoom Content When Applying a CSS Zoom Value to a Div
Web-Kit and Sub-Pixel Values, Workaround