css - 如何将嵌套在 float 中的 div 的高度设置为相对于窗口高度？

Question

我正在尝试构建下图中的简单布局。 (1)、(2) 和 (3) 是必需的内容 Pane - (4) 我不确定是否需要定位。

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

我想我需要将 (1) 和 (2) 放入 (4) 中，让它们一起正确地 float 到 (3) 的左侧。但是如果我这样做，我就不能将 (1) 的高度设置为 75%，因为它现在是相对于 (4) 的，后者作为 float 具有零高度。但是，如果我随后将 (4) 设置为窗口的 100% 高度，那么当 (3) 中的内容增长时会出现问题。

我错过了什么？

附言。重要的是 (1) 具有流体高度并且始终是当前视口(viewport)高度的 75% - 否则我可以在加载时通​​过 javascript 设置它。我可以在技术上扩展它以在窗口高度更改时按程序调整窗口大小，但应该有更优雅的 CSS 方法来执行此操作。

Answer 1

纯 CSS 解决方案要求左列 (4) 周围没有边框，因为我们需要给它 height:100% 但允许 overflow:visible这样左下角的 (2) Pane 就不会被切断。

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 调整左上 Pane 的大小并不像您想象的那样不雅。使用 jQuery:

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

http://jsfiddle.net/tMUMj/

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