0

我有以下结构： 图片 http://images.devs-on.net/Image/4eludampmz3Ylfm6-Bereich.png

我不知道头部的高度，但我希望第二个容器填充其余的高度。

当我现在想要头部大小时，我找到了一些解决方案，但我没有。我希望上部容器适合其内容，而第二个容器填充窗口的其余部分。

如何解决这个问题？

4

6 回答 6

1

你可以这样做

position:absolute;
height:100% !important;
于 2012-09-25T08:57:03.047 回答
1

你可以使用 JavaScript/jQuery

var topDivHeight = $("#topdiv").height(),
totalHeight = $(document).height();
$('#bottomDiv').height(totalHeight  - topDivHeight );
于 2012-09-25T08:57:07.803 回答
1

使用纯 CSS 并没有真正好的跨浏览器方式来做到这一点。最好的办法是使用 jQuery/javascript 来调整 div 的高度以填充屏幕。假设您的顶部 div 高度为 200px：

$("#bottom_div").css({
    minHeight: (($(window).height()) - 200) + 'px'
})

当你调整屏幕大小时，你也需要调用它。

于 2012-09-25T08:57:50.407 回答
1

改编自：具有基于浏览器窗口高度的动态最小高度的 div，不依赖于 javascript。

HTML：

<div id="header">
  Place your header information here.
</div>
<div id="content">
  Place your content here.
</div>

CSS：

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto !important /*min-height hack*/
  height: 100%;           /*min-height hack*/
  background-color: red;
}​

JSFiddle 测试：http: //jsfiddle.net/7SP9U/

于 2012-09-25T09:02:31.513 回答
1

为此，您可以为此使用display:table属性，但它在 IE8 及更高版本之前都可以使用。像这样写：

<div class="container">
    <div class="header">header</div>
    <div class="content">content</div>
</div>

CSS

.container{
    display:table;
    height:800px;
    width:100%;
}
.container > div{
    display:table-row;
}
.header{background:red; height:10%;}

.content{background:blue}

检查这个http://jsfiddle.net/Rvbk4/2/

于 2012-09-25T09:05:31.777 回答
0

这是一个仅适用于 IE8 的纯 CSS 解决方案，因为使用了display: table.

容器必须占满高度，绝对定位并占满display: table。它的孩子将需要display: table-row（如果您想要在此级别以下的任何体面的样式，您应该真正将内容包装在进一步的包装器中，display: table-cell但我省略了这一点以使示例清晰）。

By default the rows will take up equal fraction heights of the parent, but you can make them shrink to fit their content by setting height: 0 (or any other height).

Hope this helps:

http://jsfiddle.net/barney/nXWbL/

于 2012-09-25T09:58:13.233 回答