html - CSS:导航栏并在其下放置 div

Question

我正在尝试使用 bootstrap 创建一个导航栏，并在其下放置一个 div我希望导航栏下的 div 占据页面的所有其余部分。问题是我不知道该怎么做，我是 Bootstrap 和 CSS 的新手。

我创建了这样的导航栏:

 <nav class="navbar navbar-inverse">
 <div class="container-fluid">
 <div class="navbar-header">
   <a class="navbar-brand" href="#">WebSiteName</a>
 </div>
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
 </ul>
</div>
</nav>

在它下面放一个div:

 <div id='restofthepage'></div>

这是CSS:

html, body {
  height: 100%; 
  width: 100%;
}
.navbar {
  top: 10px; 
  wisth: 100%;
}
.restofthepage{
  padding-top: 15px;
  height: 100%; 
  width: 100%; 
  background-color: red;
}

但是当我显示它时，我只能看到导航栏，但我想两者都看到，而且导航栏下的 div 占据了整个屏幕。我该怎么做？

Answer 1

在您的 CSS 中将类更改为 id。

html, body {
  height: 100%; 
  width: 100%;
}
.navbar {
  top: 10px; 
  wisth: 100%;
}
#restofthepage{
  padding-top: 15px;
  height: 100%; 
  width: 100%; 
  background-color: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-inverse">
 <div class="container-fluid">
 <div class="navbar-header">
   <a class="navbar-brand" href="#">WebSiteName</a>
 </div>
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
 </ul>
</div>
</nav>
<div id='restofthepage'></div>