Question

我在此示例后创建了一个基本布局：

<body>
<div id="header"></div>
<div id="content"></div>
</body>

使用以下CSS应用：

body {
height: 100%;
}

#header {
height: 70px;
}

#content {
height: 100%;
display: block;
}

我的内容标记是我身体标记的100％，导致额外70px的div高度并导致溢出/滚动条。我希望页面能够响应浏览器的高度，但我不希望用div将%设置在我的身体内，因为我需要我的标题始终为70px。我怎样才能做到这一点？

Answer 1

您可以使用固定定位：

#header, #content {
  position: fixed;
  left: 0;
  right: 0;
}
#header {
  top: 0;
  height: 70px;
  background: red;
}
#content {
  top: 70px;
  bottom: 0;
  background: green;
}

<div id="header"></div>
<div id="content"></div>

Answer 2

你可以使用CSS的calc()：

#content{
  height: calc(100% - 70px);
  display: block;
}

这将比当前屏幕高度减去70px

Answer 3

演示 - http://jsfiddle.net/utv69qze/

您可以使用calc()同时将html height设为100%

#content {
  height: calc(100% - 70px);
}

body, html {
    height: 100%;
}

将Div内部设置为100％身高

3 个答案: