Question

我在我的应用程序中遇到CSS布局问题，并使用jsFiddle重现它。

基本上，它非常简单如下：

html,body {
    height: 100%;
}
.header {
   background: yellow;
   height: 50px;
}
.main {
   background: green;
   height: calc(100% - 50px);
}

<div class="header">Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</div>
<div class="main"></div>

标题div设置为50px的固定高度，我希望主div可以占用剩余高度，因此我使用calc(100% - 50px)。

但结果对我来说有点奇怪。生成的高度不准确，并生成垂直滚动条。我检查了边距或填充，没问题。

我想要的结果是整个页面分为两部分。并且没有滚动条产生。

Answer 1

默认情况下，浏览器设置了一些margin（约8px），将其重置为0。

＆＃13;

html,body {
  height: 100%;
}
body {
  margin: 0;
}
.header {
  background: yellow;
  height: 50px;
}
.main {
  background: green;
  height: calc(100% - 50px);
}

＆＃13;

<div class="header">Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</div>
<div class="main"></div>

＆＃13;

Answer 2

正如@Pangloss上面所说，浏览器会自动为页面添加边距，从而导致该问题。防止这种和其他不同浏览器怪癖的好方法是在CSS构建过程中使用Normalize.css或链接到<head>中的CDN。

使用CSS calc（）数学方法计算高度

2 个答案: