绝对定位的行比容器宽

时间:2019-06-21 15:00:35

标签: html css bootstrap-4 css-position

我有一个网站,其中包含一个自举容器流体,其中包含多行。每行是视口的高度(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工具,否则在代码段中并不十分明显,但是页脚行的宽度大于容器的宽度。

可根据需要在代码段中进行垂直定位。

0 个答案:

没有答案