gpt4 book ai didi

html - 嵌套 block 所有边距

转载 作者:太空宇宙 更新时间:2023-11-04 12:35:15 24 4
gpt4 key购买 nike

我需要一个不使用 JS 或 jQuery 的使用 css 的跨浏览器解决方案。所以我有两个 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

最佳答案

这里有两个例子:

1.如果不介意不支持IE 8及以下,可以使用css CALC()计算内部 block 的最小高度: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 - 嵌套 block 所有边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27335043/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com