javascript - 使 float 元素的高度为 100% 以填充页面

Question

无论“主”div 有多大，我都试图让左侧栏的高度为 100% 并填充页面。

目前它停在正常的页面高度并且不会增加高度。

有什么办法可以实现吗？

JFiddle:https://jsfiddle.net/hjnheonk/

HTML:

<div class="container">
<div class="navbar-left">
    <div id="top">
        <h2><b>Admin</b>Panel</h2>
    </div>
    <div id="navigation">
        <ul>
            <li class="nav-header">Main Pages: </li>
            <li>
                <a href="index.php">Home</a>
            etc ...
        </ul>

    </div>
</div>

<div id="navbar-top">
    <div id="user">
        <?php echo'<p id="user_greeting">'.$username. '<span class="fa fa-caret-down"></span>'.'</p>'?>
    </div>
    <div id="icon">
        <span>
            <hr><hr><hr>
        </span>
    </div>

  <div class="main">

  </div>    
</div>
</div>

**CSS:**

html,body {
    height: 100%;
}

.container {
    margin-left: 230px;
    height: 100%;
    position:relative;
}

.navbar-left {
    background-color:rgb(26, 34, 38);
    color:white;
    width: 230px;
    margin-left: -230px;
    height: 100%;
    float:left;
}

.navbar-left #top {
    background-color:#367fa9;
    min-height: 50px;
    text-align: center;
}

.navbar-left #top h2 {
    font-size: 20px;
    padding: 15px 0px;
}
#navbar-top {
    float:right;
    width: 100%;
    position:relative;
    background-color:#3c8dbc;
    width: 100% !important;
    margin:0 auto;
    border: none;
    min-height: 51px;
}


#navbar-top #icon {
    width: 20px;
    padding: 18px 10px !important;
}

#navbar-top #icon hr {
    margin:0 auto;
    padding: 0px;
    border: 1px solid white;
    border-radius: 5px;
}

#navbar-top #icon hr:not(:first-child) {
    margin-top: 5px;
}

#navbar-top > div:hover:not(#userDropdown) {
    background-color:#47a0d3;
    cursor: pointer;
}

#brand {
    float:left;
}

#navigation .nav-header {
    background-color: #272f33;
    padding: 12px 30px;     
    text-align: left;
    margin-top: 40px;
    margin-bottom: 25px;
}

#navigation ul li a:hover {
    background-color: #273136;
}

#navigation ul li a {
    width: 100%;
    display: block;
    padding: 12px 0px;
    background-color: #1a2226;
    text-align: center;
    color:white;
    text-decoration: none;
}

.main {
    float:left;
    width: 100%;
  background-color:pink;
  height: 1000px; /*Used as an example to show */
}

Answer 1

没有办法通过纯 CSS 来做到这一点，它们是您编码切片的方式。如果您希望它使用当前布局 - 通过 JS 计算高度，基于右列的内容和高度。

基本上在你的情况下有不同的方式进行:

1. 根据右边栏的内容和高度，通过JS计算高度。
2. 嵌套 DIV。所以一个 div 会拉伸(stretch)它的父元素。然后就可以使用纯 CSS 解决方案。 Read more here可能的解决方案之一。
3. 用“display:table-cell;”“覆盖”div 的标准行为(表格、表格行等)，甚至可以使用类似 CSS 的现代功能 flexboxes

走哪条路，由你决定。