如何將我的容器高度從網頁頂部延伸到底部？

我是網絡開發新手，正在建設一個網站來練習我的技能。到目前爲止，我已經能夠根據自己的喜好自定義所有內容，但遇到了Google無法幫助我解決的問題。如何將我的容器高度從網頁頂部延伸到底部？

基本上我只是試圖複製這個雅虎頁面。請注意，在頁面中間如何有一個從導航欄一直延伸到頁面末尾的白色容器。然後在容器的兩側有灰色背景。

這就是我想爲我下面的頁面來完成。我想讓白色容器延伸到黑色導航欄的正下方。並且爲了達到頁面的底部，還希望它能夠根據內容進行響應，因此沒有固定的高度。

我看過一些帖子說做這樣的事情，但這並不做任何事情對我的白色容器。我在上面的頁面中包含了完整的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"> 
 
\t \t   <span class="sr-only">Toggle navigation</span> 
 
\t \t   <span class="icon-bar"></span> 
 
\t \t   <span class="icon-bar"></span> 
 
\t \t   <span class="icon-bar"></span> 
 
\t \t  </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

任何幫助將不勝感激！謝謝。

來源

2017-10-17 CaliLove

相反的：

height: 100%;

試試這個：

height: 100vh;

來源

2017-10-17 04:55:46

感謝您的建議。所以這種改變使容器延伸到了頁面的底部，但是白色容器的頂部和我的導航欄之間仍有空間。 – CaliLove

你需要給予高度的身體。您可以使用100vh得到視口的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>

來源

2017-10-17 04:58:18 Swellar

看起來我不能在這些回覆中發佈代碼。所以基本上我加了你的建議但沒有發生什麼事我的白色容器沒有做任何事情？新增「身高：100vh」;到我的.body類。並在我的.container .row類中添加了「height：100％」。 – CaliLove

@CaliLove無論發生什麼或者你想在添加代碼後發生什麼都將是另一個問題，除非它是對我的回答的澄清 – Swellar

如何將我的容器高度從網頁頂部延伸到底部？

回答

相關問題