任何人都可以帮我修复我的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，但这里需要使用，因为您无法编辑Bootstrap LESS。因此，我的最终建议（以及当前在笔中的内容）将是向jumbotron元素添加一个新类（让我们称之为.tight），这将允许您在没有{{1像这样：

!important

Answer 2

按照@jack的提示，在css中添加此代码：

regexp(Y,X)

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

改变＆＃34;容器＆＃34;上课到＆＃34; col-sm-12＆＃34;从轰鸣声：

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