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

由 发布于

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

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

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中。

谁能看到我要去哪里错了？