How do I set the height of a div nested inside a float to be relative to window height?

Question

I'm trying to build the simple layout that I have got in the image below. (1),(2) and (3) are required content panes - (4) I'm not sure if I need for positioning.

My main problem is that the height of (1) needs to be set relatively to be 75% of window (viewport) height. Below it, I want to have content added separately, that can have variable height. And on the right, I want a single independent column of content with variable height.

I think I need to put (1) and (2) into (4) to let them float together to the left of (3) properly. But if I do that, I can't set the height of (1) to 75% because it's now relative to (4), which as a float, has zero height. But if I then set (4) to 100% height of window, that will cause problems when content in (3) grows.

What am I missing?

Ps. It's important that (1) has a fluid height and is always 75% of the current viewport height - otherwise I could have set it via javascript on load. I could technically extend this to resize the window procedurally whenever the window height is changed, but there should be a more elegant CSS way to do this.

Desired layout

Hm ok, so I can only do it via javascript then. I was hoping there was a more passive way I was missing where I could make the height refer directly to window height via CSS somehow. — Taneem Tee, Mar 27 '12 at 15:28

Blazemonger · Accepted Answer · 2012-03-27T15:36:08.957

A pure CSS solution requires that there's no border around (4), the left column, because we need to give it height:100% but allow overflow:visible so that (2), the bottom left pane, isn't cut off.

html, body {
    height: 100%;
}
#cont1, #cont2 {
    width: 45%;  /* or something less than 50% */
    float: left;   
}
#cont1 {
    height: 100%;
    overflow: visible;
}
#sub1 {
    height: 75%;
}

http://jsfiddle.net/tMUMj/3/

However, using JavaScript to resize the left top pane isn't as inelegant as you might think. Using jQuery:

$(document).ready(function() {
    $(window).trigger('resize');
});
$(window).on('resize',function() {
    $('div#lefttoppane').height( 0.75 * $(window).height() );
});

http://jsfiddle.net/tMUMj/

The computation itself is now restricted to one line of code, plus two event handlers, one of which triggers the other.

score 0 · Answer 2 · answered Mar 27 '12 at 15:23

0

You can only use float on the right container and set the width of the left one to let's say (50%). If you right container takes 50% total (border, padding and margin included), it will float on its right.

answered Mar 27 '12 at 15:23

maniak

442
5
22

But - how do I make (1) 75% of window height, when it is inside (4)? – Taneem Tee Mar 27 '12 at 15:26
@TaneemTee You can make (4) `height: 100%` (as well as `html` and `body`), but that only works if (4) has no visible border and has `overflow:visible`. – Blazemonger Mar 27 '12 at 15:31
That'll be what I try first before falling back to the javascript method. My concern is that there might be other side effects of letting content in (3) overflow the height of (4). – Taneem Tee Mar 27 '12 at 15:34
no, no need to use javascript look at what taneem tee said. if you set html and body with height: 100%, it will works. – maniak Mar 27 '12 at 15:36

score 0 · Answer 3 · answered Mar 27 '12 at 15:28

I think this is what you mean:

<div class="pane4">
    <div class="pane1">ONE</div>
    <div class="pane2"TWO></div>        
</div>

<div class="pane3">THREE</div>
<div class="clear"></div>

CSS:

body, html { height:100% }

.pane4 {
    width:200px;
    float:left;
    height:100%;
    border:1px solid #ff0000   
}

.pane1 {
    height:75%;
    border:1px solid #00cccc   
}

.pane2 {
    border:1px solid #ff0000    
    min-height:50px;
}
.pane3 {
    float:left;
    width:200px;   
    border:1px solid #cc00cc
}


.clear { clear:both }

How do I set the height of a div nested inside a float to be relative to window height?

3 Answers3