css - 将可滚动的 div 引导到 body 高度 100%

Question

我想让 body 固定为 100% 高度，在 body 内有一个主 div 可滚动，并且周围有一些边距。像这样:

Answer 1

你真的不需要 Bootstrap!

如果您无法运行代码片段，这是 CodePen 上的笔:http://codepen.io/kranzy/pen/bwqWbo

body {
  margin: 0;
}
.full {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  overflow: hidden;
}
.inside {
  position: relative;
  /* some bit of margins */
  top: 50px;
  left: 50px;
  /* calculate the width, if not, weird effect. */
  width: calc(100% - 50px * 2);
  height: calc(100% - 50px * 2);
  /* 50px * 2 because 50px is just enough for the .inside div's width and height not to fall out of screen. */
  /* make it like your image */
  background-color: blue;
  overflow: auto;
}

<div class="full">
  <div class="inside"></div>
</div>