Question

我需要一个使用css而不使用JS或jQuery的跨浏览器解决方案。所以我有两个div：

<div class="block1">
  <div class="block2">
    content
  </div>
</div>

我需要block2为block1的全宽。对于block2，我需要每边15px的间距。它必须是响应式布局宽度和高度。 block1必须是100％的页面宽度和高度。我所看到的。 block2边距有问题。我在block2的所有方面都没有得到15px的间距。我现在底部有问题。 block1 =背景：红色; block2 =背景：黑色; 首先，我认为这是一项简单的任务，但目前我没有找到解决方案。我尝试过的： HTML

<body class="body">
    <div class="block1">
        <div class="block2">
            content
        </div>        
    </div>      
</body>

CSS

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;  
}
.body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;        
}

.block1 {
    width: 100%;
    background:red;     
    height: 100%;      
    display: block;
    overflow: hidden;
}

.block2 {
    background: #000000;
    min-height: 100%;
    margin: 15px 15px 15px 15px;
    color: #ffffff;
}

enter image description here

Answer 1

这里有两个例子：

1。如果您不介意它不支持IE 8及更低版本，您可以使用css CALC()来计算内部块的最小高度：min-height: calc(100% - 30px);（ 30是顶部+底部边距）

html, body  {
    left:0;
    top:0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.block1 {
    width: 100%;
    background:red;
    height: 100%;
    display: block;
    overflow: hidden;
}
.block2 {
    background: #000000;
    min-height: calc(100% - 30px);
    margin: 15px 15px 15px 15px;
    color: #ffffff;
}

<div class="block1">
    <div class="block2">content</div>
</div>

2。 IE 8中应该支持的解决方案是：

html, body  {
    left:0;
    top:0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.block1 {
    width: 100%;
    background:red;
    height: 100%;
    display: block;
    overflow: hidden;
}
.block2 {
    background: #000000;
    margin: 15px 15px 15px 15px;
    display:block;
    position:absolute;
    bottom:0;
    top:0;
    left:0;
    right:0;
    color: #ffffff;
}

<div class="block1">
    <div class="block2">content</div>
</div>

嵌套块所有侧面间距

1 个答案: