页面的导航部分下方有一些空白区域..即使我已将其高度定义为100％。 我试图达到导航栏的全高，但由于某种原因我无法得到它 你能帮我解决一下吗？
这是我的代码..
https://codepen.io/Ail/pen/LWygrZ
/*navigation*/
nav {
height: 100%;
}
#navigation {
width: 200px;
padding: 1em 0em;
color: white;
background: #8D0D19;
height: 100%;
float: left;
margin-right: 50px;
margin-bottom: 0px;
bottom: 0px;
}
#navigation a {
text-decoration: none;
width: 100%;
display: block;
padding: 10px;
color: white
}
ul.sections {
padding-left: 0;
list-style: none;
font-size: 18px;
width: 100%;
background-color: #8D0D19;
}
.active {
font-weight: bold;
background-color: #450606;
color: white;
padding: 10px;
}
.active_p {
font-weight: bold;
background-color: #450606;
color: white;
padding: 10px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
#navigation li {
margin-bottom: 5px;
width: 100%;
}
ul.pages {
padding-left: 2em;
list-style: initial;
font-weight: normal;
color: #D4E6F4;
background: #8D0D19;
margin-top: 25px;
margin-bottom: 25px;
text-decoration: none;
width: 100%;
}
.section_name {
font-weight: normal;
background-color: brown;
color: white;
padding: 10px;
}
.section_name:hover {
font-weight: normal;
background-color: gray;
color: white;
padding: 10px;
}
a {
color: white;
}
a:hover {
color: white
}
.admin_links {
color: cornflowerblue;
}
.admin_links:hover {
color: darkslategrey;
}
/*jumbotron*/
.jumbotron {
margin-bottom: 0px;
}
.msg {
font-size: 16;
color: white;
background-color: green;
border-radius: 7px;
padding: 10px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="jumbotron">
<div class="container-fluid">
<h1>CorpoViz</h1>
</div>
</div>
<nav id=navigation>
<ul class="sections">
<!--COMMENT passed a query string below to identify the section-->
<li>
<!-- below code highlights the current section -->
<a class="section_name" href="?section=1">
About</a>
<ul class=pages>
</ul>
</li>
<!--COMMENT passed a query string below to identify the section-->
<li>
<!-- below code highlights the current section -->
<a class="section_name" href="?section=2">
Projects</a>
<ul class=pages>
<li>
<!-- below code highlights the current page -->
<a href="manage_content.php?page=1">
Project 1</a>
</li>
<li>
<!-- below code highlights the current page -->
<a href="manage_content.php?page=2">
Project 2</a>
</li>
</ul>
</li>
<!--COMMENT passed a query string below to identify the section-->
<li>
<!-- below code highlights the current section -->
<a class="section_name" href="?section=3">
Products</a>
<ul class=pages>
<li>
<!-- below code highlights the current page -->
<a href="manage_content.php?page=3">
Product 1</a>
</li>
<li>
<!-- below code highlights the current page -->
<a href="manage_content.php?page=4">
Product 2</a>
</li>
</ul>
</li>
<!--COMMENT passed a query string below to identify the section-->
<li>
<!-- below code highlights the current section -->
<a class="section_name" href="?section=4">
Others</a>
<ul class=pages>
</ul>
</li>
</ul>
</nav>
<div class="container-fluid" id=main>
<div class="container" id=page style="padding:30px;">
<h2>Create new Section</h2><br>
<form action=create_section.php method=post>
<div class="form-group">
<label style="font-size:18px" for="section_name">Section name </label>
<input type="text" class="form-control" id="section_name" name="section_name" style="width:60%">
</div>
<div class="form-group">
<label style="font-size:18px" for="position">Position </label>
<select class="form-control" id="position" style="width:60%" name=position>
<option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option> </select>
</div>
<div class="form-group">
<label style="font-size:18px">Status </label><br>
<label class="radio-inline"><input type=radio name=status class="s_visible" value="1">Visible</label>
<label class="radio-inline"><input type=radio name=status class="s_hidden" value="0">Hidden</label>
</div>
<br>
<input type=submit name="submit" class="btn btn-primary" value="Create Section">
<a href="manage_content.php" class="btn btn-danger">✖ Cancel</a>
</form>
</div>
</div>
答案 0 :(得分：2)
底部空白不是来自你的导航，而是来自.container，它的所有边（包括底部）都有30px的填充。如果您想在另一侧保留该填充，则只需将.container上的样式更改为padding: 30px 30px 0 30px;
注意：如果您还想删除导航栏顶部的空白，可以通过设置以下内容来完成：
.jumbotron {
margin-bottom: 0 !important;
}
通常应该避免使用!important，但这里需要使用，因为您无法编辑Bootstrap LESS。因此，我的最终建议（以及当前在笔中的内容）将是向jumbotron元素添加一个新类（让我们称之为.tight），这将允许您在没有{{1像这样：
!important答案 1 :(得分：0)
按照@jack的提示，在css中添加此代码：
regexp(Y,X)答案 2 :(得分：0)
要从导航顶部删除空白区域，
.jumbotron {
margin-bottom: 0;
}
实现导航栏的全高
#navigation {
width: 200px;
padding: 1em 0em;
color: white;
background: #8D0D19;
height: 100%;
/* float: left; */
margin-right: 50px;
margin-bottom: 0px;
bottom: 0px;
position: absolute;
top: 249px;
}
#main{
margin: 0 0 0 200px;
}
改变＆＃34;容器＆＃34;上课到＆＃34; col-sm-12＆＃34;从轰鸣声：
<div class="container" id=page style="padding:30px;">