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

目前没有跨浏览器方式只使用CSS。要使其适用于所有浏览器，您需要使用JavaScript。如果您想要处于最前沿并且仅支持最新的浏览器，您可以查看IE10's grid layout。

Answer 2

正如其他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/

Answer 3

如何使用position: absolute，然后将顶部div的height设置为100px，将底部div的top设置为相同的值：< / p>

HTML：

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

CSS：

div.div1, div.div2 {
  position: absolute;
  left: 0;
  right: 0;
  outline: solid 1px #ccc; /* just for making the divs visible */
  margin: 5px; /* just for making the divs visible */
}
div.div1 {
  height: 100px;
  top: 0;
}
div.div2 {
  top: 100px;
  bottom: 0;
}

此解决方案根本不需要JavaScript！

Demo here。

水平分屏，2格

3 个答案: