html - 在 2 div 中水平拆分屏幕

Question

我想在 html 中设置一个 div 并用剩余空间设置第二个 div..我想这很简单，但我很难做到这一点。

我想设置一个固定高度的 div 并用剩余空间制作第二个，类似这样:

<div class="div1">1st</div>
<div class="div2">2nd</div>

CSS:

div.div1{background: #999; height: 78px;}
div.div2{ background: #666; height: (remaining_space); }

这可能吗？

Answer 1

正如其他 SO 用户所说，没有跨浏览器的方法只能使用 CSS 来做到这一点。虽然我注意到你没有用 javascript 标记你的问题，但我会为你建议一个使用 jQuery 的解决方案

$(document).ready(function() {
    var docHeight = $(document).height();
    var div1Height = $('.div1').height();
    var div2Height = docHeight - div1Height;
    $('.div2').css('height', div2Height);
});

http://jsfiddle.net/FakeHeal/TjPQ6/