如何将嵌套在浮动内的div的高度设置为相对于窗口高度？

Question

我正在尝试构建下面图片中的简单布局。 （1），（2）和（3）是必需的内容窗格 - （4）我不确定我是否需要定位。

我的主要问题是（1）的高度需要相对设置为窗口（视口）高度的75％。在它下面，我想要单独添加内容，可以有可变高度。在右边，我想要一个可变高度的单独内容列。

我想我需要将（1）和（2）放入（4）让它们正确地漂浮在（3）的左边。但是如果我这样做，我就不能将（1）的高度设置为75％，因为它现在相对于（4），它作为一个浮点数，具有零高度。但是，如果我将（4）设置为100％的窗口高度，那么当（3）中的内容增长时，这将导致问题。

我错过了什么？

聚苯乙烯。重要的是（1）具有流体高度，并且始终是当前视口高度的75％ - 否则我可以通过javascript加载来设置它。我可以在技术上扩展它，以便在窗口高度发生变化时以程序方式调整窗口大小，但是应该有一种更优雅的CSS方式来执行此操作。

Answer 1

纯CSS解决方案要求左栏（4）周围没有边框，因为我们需要给它height:100%但允许overflow:visible以便（2），左下方窗格，没有被切断。

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/

但是，使用JavaScript来调整左上顶部窗格的大小并不像您想象的那么简单。使用jQuery：

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

http://jsfiddle.net/tMUMj/

计算本身现在仅限于一行代码，加上两个事件处理程序，其中一个触发另一个。

Answer 2

你只能在右边的容器上使用float，并设置左边的宽度，比方说（50％）。如果你正确的容器占总数的50％（包括边框，填充和边距），它将浮动在右边。

Answer 3

我认为这就是你的意思：

<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 }