html - Bootstrap 4 - 将页脚推到页面底部并用主要内容填充高度

Question

我正在尝试使用页眉导航栏和页脚创建一个简单的引导布局。如果没有足够的内容，我希望页脚被推到页面底部。

到目前为止我有这个...

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.container {
	max-width:100%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<header>
    <nav style="color:white;" class="navbar navbar-dark bg-dark">
        Navbar
    </nav>
</header>

<main style="background:grey;color:white;width:100%;" role="main" class="container">
    <p>
        Pin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin aliquam nisl, ut elementum eros volutpat ac. Aliquam erat volutpat. Fusce felis urna, cursus vel arcu vitae, egestas ornare nulla. Integer aliquam volutpat justo, vitae pharetra mi luctus ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vel magna a ligula viverra posuere. Integer a augue id nunc hendrerit molestie. Morbi tempor sapien tellus, non dignissim ex dignissim sit amet. Suspendisse sed sodales mauris, et blandit mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eu posuere elit.
    </p>
</main>

<footer class="footer">
    <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
    </div>
</footer>

它几乎可以工作，但我希望主要内容也能填充高度。这样我就可以在 div 内垂直居中。

谁能看到我哪里出错了？

标签： htmlcsstwitter-bootstrapbootstrap-4

Answer 1

在这里使用100vh，如果你不想要完整的视角，你可以从中削减导航栏的高度，这样就不会出现滚动条。

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.container {
	max-width:100%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

.mainClass {
  height: calc(100vh - 40px);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<header>
    <nav style="color:white;" class="navbar navbar-dark bg-dark">
        Navbar
    </nav>
</header>

<main style="background:grey;color:white;width:100%;" role="main" class="container mainClass">
    <p>
        Pin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin aliquam nisl, ut elementum eros volutpat ac. Aliquam erat volutpat. Fusce felis urna, cursus vel arcu vitae, egestas ornare nulla. Integer aliquam volutpat justo, vitae pharetra mi luctus ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vel magna a ligula viverra posuere. Integer a augue id nunc hendrerit molestie. Morbi tempor sapien tellus, non dignissim ex dignissim sit amet. Suspendisse sed sodales mauris, et blandit mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eu posuere elit.
    </p>
</main>

<footer class="footer">
    <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
    </div>
</footer>