Question

我想创建两个div，一个在另一个内部，在孩子的所有方面都有相同的填充。像这样

<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

Answer 2

嗨等于填充使用以下代码。

现场演示在http://jsfiddle.net/adarshkr/fqm83gms/5/

html

<div class="outer">
    <div class="inner">
        <p><a href="http://www.adarshkr.com">Equal padding adarsh</a></p>
    </div>
</div>

css

body{
    background:#ddd
}
.outer{
     background:#eee;
    padding:20px
}
.inner{
     background:#000;
    padding:20px;
    color:#fff
}
.inner a{
    color:#fff;
    text-decoration:none
}

Answer 3

好的，现在我在一台真正的电脑上：

我想你想要这个：（Js Fiddle For Reference）

body,html{
    height:100%;width:100%;
}

body{
    padding:1em;
}

body >div{
    border:1px solid black;
}

创建一个页面适合div和一个均匀填充内部的子项

3 个答案: