如何删除this codepen底部和页脚div之间的空格。我已经尝试了this SO post上的建议,但似乎不起作用。谢谢。
* {
margin: 0;
padding: 0;
}
body {
background-color: grey;
bottom: 0;
margin: 0;
}
.container {
height: 2000px;
background-color: white;
}
.footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
background-color: green;
color: white;
text-align: center;
margin: 0;
}
<div class="container">
<div class="row">
<div class="col-12">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
2条答案
按热度按时间vhmi4jdf1#
您将
.container
div的高度设置为2000px,因为div中没有足够的内容来填充该空间,所以看起来容器和页脚之间有一个空白。如果您从“.container”css中删除
height: 2000px;
,它将删除多余的空间。6mzjoqzu2#
将容器高度从
2000px
更改为100%
(或者完全删除)。一般来说,如果你想按比例组合或填充空间,避免使用静态单位(如像素),而使用动态单位(如%
、vw
或vh
)。你可以阅读更多关于它们的信息here