如何将html元素的高度设置为{100％ - 从底部开始的10em}

Question

让我们考虑一个元素#top。我希望它的高度为页面的100％，但从底部减少10em。我无法弄明白该怎么做。请帮忙。

HTML

<div id="top"></div>
<div id="bottom"></div>

CSS

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 100%;
}
#top {
  width: 100%;
  height: 70%;
  background-color: red;
}
#bottom {
  position: absolute;
  bottom: 0;
  margin-left: 10%;
  width: 100%;
  height: 10em;
  background-color: #000000;
}

请参阅http://codepen.io/anon/pen/jEqYMK（例如，我展示了另外一个元素#bottom）。

Answer 1

您的演示很奇怪，但无论如何，如果您想从10em中扣除100%，请使用calc()属性

#top {
    width: 100%; /* You won't need this */
    height: calc(100% - 10em);
    background-color: red;
}

Demo

注意：我已从您的演示中删除了position: absolute;，margin-left类似属性，因为我不知道您为什么在第一时间使用它们，但如果您愿意，您仍然可以使用它们。