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

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

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

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

我错过了什么

另外，重要的是（1）有一个流体高度，并且始终是当前视口高度的75%——否则我可以在加载时通过javascript设置它。我可以从技术上扩展它，在窗口高度改变时按程序调整窗口大小，但是应该有一种更优雅的CSS方法来实现这一点

---

您只能在右侧容器上使用float，并将左侧容器的宽度设置为50%。如果右容器占总数的50%（包括边框、填充和边距），它将在其右侧浮动。

纯CSS解决方案要求左栏（4）周围没有边框，因为我们需要为其指定高度：100%，但允许

溢出：可见

，以便左下窗格（2）不会被切断

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

然而，使用JavaScript调整左上窗格的大小并不像您想象的那样不雅观。使用jQuery：

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

---

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

我想这就是你的意思：

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

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

---

但是-当窗口位于内部时，我如何使（1）75%的窗口高度（4）？@TaneemTee您可以使（4）

height:100%

（以及

html

和

body

），但只有在（4）没有可见边框且具有

溢出：可见的
时，这才有效。在回到javascript方法之前，我先尝试一下。我担心的是，让内容（3）溢出（4）的高度可能会有其他副作用。不，不需要使用javascript看看taneem tee说的话。如果您将html和body设置为height:100%，它就会工作。嗯，好的，那么我只能通过javascript来完成。我希望有一个更被动的方式，我错过了，我可以让高度直接参考窗户高度通过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 }