CSS：navbarとその下にdivを配置

Question

私はブートストラップでnavbarを作成しようとしていて、その下にdivを置いています navbarのdivがページの残りの部分を占めたかったとします。 問題は、これを行う方法がわからないことです。私は初心者のブートストラップと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; 
} 

が、私は表示されそれはnavbarを見ることができるが、私は両方を見たいと思うし、navbarの下のdivはすべての画面を占めている。どうやってやるの？

Answer 1

これは、以下のような行クラスを作成することで簡単に実行できます。

<div class="row" id=""> 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
      <nav class="navbar navbar-inverse"> 
       <div class="container-fluid"> 
        <ul class="nav navbar-nav"> 
         <li style="background-color: #e97e36 "><a href="#" id="lhome">Home</a></li> 
        </ul> 
        <ul class="nav navbar-nav navbar-right" id="logoutb" hidden> 
         <li><a href="logout.jsp"><span class="glyphicon glyphicon-log-out"></span> Log Out</a></li> 
        </ul> 
       </div> 
      </nav> 
     </div> 
    </div> 
<div class="row" id='restofthepage'> 
Rest of page content goes here. 
</div> 

Answer 2

あなたの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>