我正在尝试使用 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 占据了整个屏幕。我该怎么做?
最佳答案
在您的 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>
关于html - CSS:导航栏并在其下放置 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44198979/