CSS：導航欄和地方div下它

我想創建一個導航欄，並在其下放置一個div 我希望導航欄下的div佔據頁面的所有其餘部分。問題是我不知道如何做到這一點，我是一個新手Bootstrap和CSS。CSS：導航欄和地方div下它

我創建導航條是這樣的：

<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; 
}

但是當我顯示它，我可以onşy看到導航欄，但我想看到兩個，並在導航欄下的div佔據了所有的屏幕。我怎樣才能做到這一點？

來源

2017-05-26 traveller

請過分享您的CSS，感謝 – sol

普萊斯提供了一個最小的，完整的，並且可驗證例如：https://stackoverflow.com/help/mcve –

你可以簡單地通過創建一個像下面這樣的行類來做到這一點。

<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>

來源

2017-05-26 10:19:55 Shrikant

將類更改爲您的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>

來源

2017-05-26 14:00:21 LXhelili

CSS：導航欄和地方div下它

回答

相關問題