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

As the other SO users said, there is no cross browser way to do this only with CSS. Although I have noticed that you didn't tag your question with javascript I will suggest a solution for you using 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 2

目前没有跨浏览器的方法可以仅使用 CSS 来执行此操作。要使其适用于所有浏览器，您将需要使用 JavaScript。如果你想走在最前沿并且只支持最新的浏览器，你可以看看IE10 的网格布局。

Answer 3

使用position: absolute, 然后将height顶部 div 的 设置为 ,100px将top底部 div 设置为相同的值:

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！

演示在这里。