html - 创建一个适合页面的 div 和一个均匀填充在里面的 child

Question

我想创建两个 div，一个在另一个里面，在 child 的四面都有相等的填充。像这样

<div>
    <div>Foo</div> 
</div>

让结果看起来像

----------------------------
|                          |
|  |--------------------|  |
|  |                    |  |   <----  There is 1em padding on the inner
|  |  Foo               |  |          container too
|  |                    |  |
|  |                    |  |
|  |--------------------|  |
|                          |   <----  This is the window height,
----------------------------          the padding is 1em on all sides;

我如何在 CSS 中做到这一点？

现在我卡在这个布局上，缺少底部填充

用这段代码

<div class="more-padded full-height blue-green fixed">
    <div class="more-padded full-height light-tan more-rounded light-border">Foo</div>
</div>

风格

.more-padded {
    padding: 1em;
}

.full-height {
    height: 100%;
}

.blue-green {
    background-color: rgba(153, 204, 204, 1);
}

.light-tan {
    background-color: rgba(239, 235, 214, 1);
}

.more-rounded {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

Answer 1

您可以使用 box-sizing :border-box; 以便宽度和高度属性包括填充和边框

HTML

 <div id="parent">
       <div id="child">Foo</div> 
    </div>

CSS

* {
margin:0;
  padding:0;
}
html, body {
  height:100%;
}
#parent {
  box-sizing:border-box;
  height:100%;
  padding:1em;
  background:hotpink;
}
#child {
  height:100%;
  background:dodgerblue;
}

Demo