我是网络开发的新手，正在构建一个网站来练习我的技能。到目前为止，我已经能够根据自己的喜好自定义所有内容，但我遇到了 Google 无法帮助我解决的问题。
基本上，我只是想复制这个 Yahoo 页面。请注意，页面中间有一个白色容器，它从导航栏一直延伸到页面末尾。然后在容器的两侧有一个灰色的背景。
这就是我想为下面的页面做的。我希望白色容器延伸到黑色导航栏的正下方。而对于它到达页面底部，又希望它根据内容做出响应，所以没有固定高度。
我看到一些帖子说要做这样的事情，但这对我的白色容器没有任何作用。我在下面包含了上面页面的完整 html 代码以及我的 CSS。我正在使用 Bootstrap 3.3.7。
.container {
margin:0px auto;
width:100%;
height:100%;
}
body {
padding-top: 100px;
background-image: url("NFL-background.png");
background-attachment: fixed;
}
.container .row {
background-color: #FFFFFF;
}<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Questrial|Roboto:900|Crimson+Text" rel="stylesheet">
<title>Make the NFL Great Again</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="text/javaScript" src="javaScript.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">Make the NFL Great Again</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="Wins-Losses.html">Wins / Losses</a></li>
<li><a href="Points.html">Points</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hall of Fame <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="LeagueChampions.html">League Champions</a></li>
<li><a href="AllTimeRecords.html">All-Time Records</a></li>
<li><a href="SeasonRecords.html">Single-Season Records</a></li>
</ul>
</li>
<li><a href="About.html">About</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container content">
<div class="row">
<h1>W-L RECORDS</h1>
<div class="col-sm-2 col-md-2">
<ul class="nav nav-pills nav-stacked Uppercase">
<li role="presentation" class="active"><a href="#">All-Time</a></li>
<li role="presentation"><a href="#">2017</a></li>
<li role="presentation"><a href="#">2016</a></li>
<li role="presentation"><a href="#">2015</a></li>
</ul>
</div>
<div class="table-responsive col-lg-10">
<table class="table table-bordered">
<thead class="Uppercase">
<th>Owner</th>
<th>Seasons</th>
<th>Matchups</th>
<th>Wins</th>
<th>Losses</th>
<th>Ties</th>
<th>Win %</th>
<th><i class="ionicons ion-trophy gold" id="goldWL"></i></th>
<th><i class="ionicons ion-ribbon-a silver" id="silverWL"></i></th>
<th><i class="ionicons ion-ribbon-a bronze" id="bronzeWL"></i></th>
</thead>
<tr>
<td>Ivan Ortiz</td>
<td>3</td>
<td>32</td>
<td>21</td>
<td>11</td>
<td>0</td>
<td>65.6%</td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>Cesar Ortiz</td>
<td>3</td>
<td>32</td>
<td>21</td>
<td>10</td>
<td>1</td>
<td>67.2%</td>
<td>1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Luis Cardenas</td>
<td>3</td>
<td>32</td>
<td>13</td>
<td>19</td>
<td>0</td>
<td>40.6%</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div id="footnote">
*Regular season only, does not include playoffs.
</div>
</div>
</div>
<!-- JQuery and JavaScript CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</div>
</body>
</html任何帮助将不胜感激!谢谢。
最佳答案
你需要给 body 赋予高度。您可以使用 100vh 获取视口(viewport)的 100% 高度，然后只需将 height: 100%; 添加到您想要的元素
body {
height: 100vh;
background-color: red;
}
div {
text-align: center;
background-color: pink;
height: 100%;
}<body>
<div>
Some Content
Some Content
Some Content
Some Content
</div>
</body>关于html - 如何将容器的高度设置为从网页顶部向下延伸到底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46782519/