请考虑以下代码段:
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
background-color: green;
min-height: 100vh;
}<section style="min-height: 50px; background-color: pink;"></section>正如所料,body元素以绿色填充整个视口,顶部有一个粉红色的section元素.
现在,假设你想做一些非常简单的事情,比如在section元素中设置一个边距:style="min-height: 50px; background-color: pink; margin-bottom: 10px;".出乎意料的是,html元素中的蓝色条带出现在视口的底部.
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
background-color: green;
min-height: 100vh;
}<section style="min-height: 50px; background-color: pink; margin-bottom: 10px;"></section>问题1)为什么会这样？这对我来说没有意义.
纠正此行为的一种方法是min-height在body元素中包含padding和calc()调整:
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
padding-bottom: 1px;
background-color: green;
min-height: calc(100vh - 1px);
}<section style="min-height: 50px; background-color: pink; margin-bottom: 10px;"></section>但是,这个解决方案需要我不熟悉的噱头.
问题2有更好的解决方案吗？(即:更直观,更易读)
您正面临利润崩溃的问题。您应用于部分的底部边距与正文的底部边距合并，因此它应用于正文而不是部分。
正如您可以在这里阅读的：
块的顶部和底部边距有时会组合（折叠）为单个边距，其大小是各个边距中最大的（或者只是其中一个，如果它们相等），这种行为称为边距折叠。
边距崩溃发生在三种基本情况下：
相邻的兄弟姐妹
父母和第一个/最后一个孩子
空块
这就是为什么在你的情况下，你有 10px 的边距底部，将滚动添加到你的页面，因为 body 有一个min-height:100vh
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
background-color: green;
min-height: 100vh;
}<section style="min-height: 50px; background-color: pink;margin-bottom: 10px;"></section>为了避免这种行为，您只需避免边距折叠即可。因此，您可以像以前一样添加一个小填充或边框，然后不要忘记添加box-sizing:border-box以避免更改高度和使用calc。
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
background-color: green;
min-height: 100vh;
border-bottom:1px solid transparent;
/* OR padding-bottom:1px */
box-sizing:border-box;
}<section style="min-height: 50px; background-color: pink;margin-bottom: 10px;"></section>您还可以使用 Flex，因为 Flex 不会导致边距折叠（查看下面的链接以了解更多方法）：
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
background-color: green;
min-height: 100vh;
display:flex;
flex-direction:column;
}<section style="min-height: 50px; background-color: pink;margin-bottom: 10px;"></section>一些可以帮助您获取更多信息的链接：
https://css-tricks.com/what-you-should-know-about-collapsing-margins/
| 归档时间： |
|
| 查看次数： |
767 次 |
| 最近记录： |