Question

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

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

有什么方法可以实现这个目标吗？

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计算高度。

在您的情况下，基本上有不同的方法可以继续：

根据右列的内容和高度，通过JS计算高度。
嵌套DIV。所以一个div将拉伸它的父母。然后就可以使用纯CSS解决方案。 Read more here可能的解决方案之一。
使用“display：table-cell;”“覆盖”div的标准行为（table，table-row等），甚至使用CSS的现代功能flexboxes

要走哪条路，取决于你。

Answer 2

容器是否需要定义为百分比？如果没有，那么你可以这样做：

$('.navbar-left').css('height', $('.container').height()+'px');

Answer 3

使用Farside的方法并在这里更新一点是我的代码：

var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});

$(window).on('resize', function(){ //accounts for if the user resizes the window, column stays in place.
   var column = $(".column_left").height() + "px";
   $(".column_right").css({"height": column});
});

Answer 4

这是一种纯粹的CSS方式来实现同样的目标。

JS Filddle： https://jsfiddle.net/cx6nu8sw/

以下是您的代码中已更改的类

#navbar-top {

    width: 100%;
    position:relative;
    background-color:#3c8dbc;

    margin:0 auto;
    border: none;
    min-height: 51px;
    display:table-cell;
    vertical-align:top;
}
.navbar-left {
    background-color:rgb(26, 34, 38);
    color:white;
    display:table-cell;
    vertical-align:top;

}
//newly addition
#navigation{
  width:230px;
}

正如@Farside在第3点所提到的，我使用过“display：table-cell;”在你的Div上。与创建表相同，其中行的高度由整行中最长的内容决定。但是，请注意宽度和宽度。具有“display：table-cell;”的元素的高度不能强迫，它会根据里面的内容进行调整。因此，您可以设置其中元素的宽度和高度，它将自动采用相同的高度和宽度。

使浮动元素具有100％的高度来填充页面

4 个答案: