我有一个网站,其中包含一个自举容器流体,其中包含多行。每行是视口的高度(100vh)。在底部,我有一排页脚。它具有固定的高度,应绝对定位,使其与最后一页的底部重叠。设置位置:绝对,并且底部:0将其垂直放置在正确的位置,但是会发生奇怪的事情。
除非我将宽度设置为100vw,否则页脚行不再水平填充容器。在这种情况下,它最终会比视口宽15像素(容器流体与视口一样宽)。我尝试了零水平填充/边距为零的各种组合,但这没有帮助。
.pageRow {
height: 100vh !important;
}
.page1 {
background-color: rgba(255, 0, 0, 0.2);
}
.page2 {
background-color: rgba(0, 255, 0, 0.2);
}
.footer {
background-color: rgba(0, 0, 255, 0.2);
position: absolute;
bottom: 0;
height: 18vh;
width: 100vw;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid" style="position: relative">
<div class="row pageRow page1">
<div class="col text-center">
FOO
</div>
</div>
<div class="row pageRow page2">
<div class="col text-center">
FOO
</div>
</div>
<div class="row footer">
<div class="col text-center">
FOOTER
</div>
</div>
</div>
除非使用dev工具,否则在代码段中并不十分明显,但是页脚行的宽度大于容器的宽度。
可根据需要在代码段中进行垂直定位。