请考虑以下代码段:
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; …