html - 页脚覆盖主要内容

Question

我在 stackoverflow 中尝试了很多解决方案来解决我的问题，但不知何故都没有用。目前我的页脚涵盖了主要内容。只有当我将页面缩小到我在移动 View 中的位置时才会发生这种情况。我不得不说页脚应该总是在底部。因此，如果我的主要内容太短，页脚仍应位于页面底部。目前我正在使用 bootstrap 4.3.1。 我的 Site.css 看起来像这样:

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

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

我的布局是这样的:

<div class="jumbotron-fluid body-content">
        <div id="main">
            @RenderBody()
        </div>

            <footer id="footer" class="page-footer font-small blue pt-4 footerInfo">
                <div class="row footerRow">
                    <div class="col-lg-3 footerCol">
                        <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>
            </footer>
        </div>

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

有人能帮忙吗？

谢谢。

Answer 1

要使用纯 CSS，min-height: 100vh;显示: 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-fluid 中包含一个 .container)