Forums

the height will be determined by the content inside the div, or you can specify a height or min/max-height. (Not sure why you want to, though)

What are you trying to do specifically? Do you have an image of the layout or a site in progress you can share?

body, html { width: 100%; height: 100%; }


.div1 { background: blue; height:10vh; } .div2 { background: red; height:30vh; } .div3 { background: green; height:60vh; }

Use “vh” which is “viewport height” rather than % or pixels.

@intodesign, you can use percentages. The only thing your missing is setting html to height: 100% as well as the body. And I’d remove all the width statements – the block level elements will take up all available width by default. You may want to set the body margin and padding to 0.

Setting a height on elements is a bad move if they are going to contain fluid elements like text because the content will spill out if the text is resized or if there is simply not enough room (e.g. when the browsers window is closed smaller).

I think you need to explain a little more about what you are trying to achieve as I can’t see much use for the elements to be spread across the viewport like that unless its just a simple page with a few headings or similar.

You always need to try out your demos with “real content” so that you can see what will happen when there is too much (or too little) content in your elements.:)

You could use Merri’s code above but use display:table (IE8+) so that the element can still grow if required.

.div1,.div2,.div3 {display:table;width:100%}

Tables require a lot more CSS syntax

They only need the one line I posted in my last post but min-height would also work as you suggest as long as you don’t nest the min-height element or you will lose the height.

However, both yours and my suggestions are flawed because should you add more content into one of the areas then the whole thing stretches past the viewport bottom edge when there is no need for it to do so.

A better approach (assuming this was the OPs idea) is to use a complete CSS table structure and allow areas to grow while not forcing the content below the fold when its not required. It’s more mark up but ultimately more reliable.

e.g.
http://www.codepen.io/paulobrien/full/JjtnH

Of course that assumes that I have understood the requirements properly – which may not be the case :)

AFAIK table-cell element is automatically created

Yes, that’s correct and that should work nicely in modern browsers and your latest example is now pretty concise. :)

Firefox used to have an issue if you didn’t explicitly create a table-row and a table-cell but that’s long since been fixed but I keep forgetting to omit them.