Question

我已经为我的问题在stackoverflow中尝试了许多解决方案，但是无论如何都无济于事。目前，我的页脚涵盖了主要内容。仅当我将页面缩小到移动视图中的位置时才会发生这种情况。我必须说，页脚应始终位于底部。因此，如果我的主要内容太短，则页脚仍应位于页面底部。目前，我正在使用引导程序4.3.1。我的Site.css看起来像这样：

services.AddMvc().AddJsonOptions(opts =>
     opts.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore);

当然，Site.css中还有其他几行。但是它们对此并不重要。

我的布局如下：

#footer {
    position: absolute;
    bottom: 0px;
}

我不希望页脚覆盖我的主要内容。页脚在移动视图中应向下生长。目前，它正在向上发展，涵盖了我的全部内容。

有人可以帮忙吗？

谢谢。

Answer 1

要使用纯CSS，可以使用包装上的min-height: 100vh; display: flex; flex-direction:column和主要内容上的flex-grow: 1。

或者，通过Bootstrap类简化：

<div class="d-flex flex-column" style="min-height: 100vh">
  <main class="flex-fill"></main>
  <footer></footer>
</div>

简短示例：

/* not part of the solution, visual helper */
footer {
  background-color: #369;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column" style="min-height: 100vh">
  <main class="flex-fill">
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          @RenderBody()
        </div>
      </div>
    </div>
  </main>

  <footer id="footer" class="page-footer font-small blue footerInfo">
    <div class="container-fluid">
      <div class="row footerRow">
        <div class="col-lg-3 footerCol py-2">
          <div class="footer-item text-center">
            <div class="footer_icon d-flex flex-column justify-content-center ml-auto mr-auto">
              <div class="fa fa-phone phoneIcon"></div>
            </div>
            <div>
              <h3>Telefon</h3>
            </div>
            <div>12345</div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

高个例子：

/* not part of the solution, visual helper */
main {
  min-height: 200vh;
  border: 1px solid red;
}

footer {
  background-color: #369;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column" style="min-height: 100vh;">
  <main class="flex-fill">
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          @RenderBody()
        </div>
      </div>
    </div>
  </main>

  <footer id="footer" class="page-footer font-small blue footerInfo">
    <div class="container-fluid">
      <div class="row footerRow">
        <div class="col-lg-3 footerCol py-2">
          <div class="footer-item text-center">
            <div class="footer_icon d-flex flex-column justify-content-center ml-auto mr-auto">
              <div class="fa fa-phone phoneIcon"></div>
            </div>
            <div>
              <h3>Telefon</h3>
            </div>
            <div>12345</div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

也请注意布局系统。它像时钟一样工作，但是有点精致：

.col-*-*作为.row的直接后代。如果需要其他除法，请将.row放在.col内（即：.row > .col > .row > .col，切勿.col > .col或.row > .row）
切勿嵌套.container！（不过，您可以在.container中包含.container-fluid）

Answer 2

您是否使用任何媒体查询将行为设置为特定的屏幕尺寸？下面是示例代码

@media only screen and (max-device-width: 480px) {}

在您的CSS中

Answer 3

我建议您将页脚的属性设置为固定位置并隐藏上溢

页脚涵盖了主要内容

3 个答案: