1

我想在 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); }

这是可能的?

4

3 回答 3

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/

于 2013-07-24T00:00:45.417 回答
1

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

于 2013-07-23T23:51:42.013 回答
0

使用position: absolute, 然后将height顶部 div 的 设置为 ,100pxtop底部 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!

演示在这里

于 2018-07-30T11:11:48.687 回答