任何人都可以幫我修復我的CSS？

Question

頁面的導航部分在它下面有一些空白區域。儘管我已將其高度定義爲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>&nbsp; 
 
     <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"> &nbsp;&nbsp;&nbsp;&nbsp; 
 

 
     <a href="manage_content.php" class="btn btn-danger">&#10006; Cancel</a> 
 

 
    </form> 
 

 

 

 
    </div> 
 

 
</div>

Answer 1

底部的空格不會從你的資產淨值的到來，但是從.container，其中有填充30PX四面八方（包括底部）。如果你想保持這種填充，另一面，你可以改變風格上.container到padding: 30px 30px 0 30px;

Updated codepen

注意：如果你也想卸下導航欄的頂部空白，這可以通過設置應做到以下幾點：

.jumbotron { 
    margin-bottom: 0 !important; 
} 

使用!important一般應避免，但因爲你不能編輯引導LESS將需要在這裏。所以，我最後的建議（什麼是目前在筆），將是一個新的類添加到超大屏幕元素（姑且稱之爲.tight），這將讓你有一個足夠具體的聲明沒有!important，像這樣：

.jumbotron.tight { 
    margin-bottom: 0; 
} 

Answer 2

@jack後續提示和在你的CSS添加以下代碼：

.jumbotron {  
    margin-bottom: 0 !important; 
} 

Answer 3

從導航的頂部刪除空白，

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

更改「容器」類「COL-SM-12」的全高：

<div class="container" id=page style="padding:30px;">