【发布时间】：2019-01-23 09:18:18
【问题描述】：
我在将我的内容垂直和水平固定在中心时遇到问题。当我在开发人员工具中检查时，我的容器流体不会覆盖页脚。我查看了其他堆栈，但仍然无法弄清楚。这是我的代码笔。 https://codepen.io/anon/pen/yqdbWd
我想要的是删除侧边栏，因为它是一个内容很少的页面。我已经包含了我的问题的屏幕截图。 而且我的容器流体并没有占据整个页面。 最后，我想知道有没有办法像这样缩短我的hr线的长度。
这是我到目前为止所做的代码。
HTML
<body>
<div class="container-fluid h-100">
<nav class="navbar navbar-light rounded">
<a class="navbar-brand" href="#">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Updates</a>
</li>
</ul>
</nav>
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron text-center">
<hr class="text-border" />
<p class="lead">Perth says tuned on it.</p>
<p class="lead">Stay Alert For Updates</p>
<hr class="text-border" />
</div>
</div>
</div>
<footer class="mt-auto">
<p class="float-left">2018 © Palungo</p>
<div class="float-right">
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Privacy</a></li>
</ul>
</div>
</footer>
</div>
这里是 CSS
body,html {
height: 100%;
background:#333A4D;
}
.navbar{
margin: 10px;
background: #333A4D;
padding: 20px;
}
.nav-link{
font-size: 25px;
line-height: 32px;
color: #F3B0B6;
}
.list-inline-item{ margin-left: 1rem; }
.jumbotron{ background: none; }
.text-border{
display: block;
height: 1px;
border: 0;
border-top: 4px solid #F3B0B6;
}
.lead{
text-transform: uppercase;
color: #F3B0B6;
font-size: 25px;
line-height: 31px;
}
@media (min-width: 48em) {
.navbar-brand{
float: left;
}
.nav{
float: right;
}
}
【问题讨论】：
-
请缩小到一个问题。有一个滚动条，因为你有一个 100% 高度的行，它外面有一个导航和页脚。该行占据了视口的 100% 高度，因此也需要为导航和页脚留出空间。
-
但我在容器流体中确实有页脚。那么，当我将它悬停在检查工具中时，为什么容器流体没有覆盖页脚。
-
因为 jumbotron 行也是 100% 的视口高度，所以它滚动到低于视口的位置
标签： html css bootstrap-4