使用 CSS calc() 数学方法计算高度答案

【问题标题】：Height calculation with CSS calc() math method使用 CSS calc() 数学方法计算高度
【发布时间】：2017-05-30 20:00:51
【问题描述】：

我在我的应用程序中遇到 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>

header div用50px设置为固定高度，我想让main div能占据剩余的高度，所以我用calc(100% - 50px)。

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

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

【问题讨论】：

标签： css css-calc

【解决方案1】：

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

html,body {
  height: 100%;
}
body {
  margin: 0;
}
.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>

【讨论】：

【解决方案2】：

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

【讨论】：