我需要一个使用CSS而不使用JS或jQuery的跨浏览器解决方案。
所以我有两个股利：
<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;
}
最佳答案
以下是两个适合您的示例：
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>关于html - 嵌套块的所有边距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27335043/