Question

跟着question跟我完全一样的我试图让menu_gauche占据所有高度。

所以当我用导航器查看CSS时：

body {
    color: #73879C;
    background: white;
    font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.471;
    height: 100%;
}

我可以看到我的body以100％作为问题链接的答案。

然后我看着我的孩子menu_gauche：

#menu_gauche {
    height: 100% !important;
}

值是100％所以它应该正常工作吗？

但由于未知原因，menu_gauche没有占据父母的所有高度。

有人知道会发生什么事情？
我的HTML看起来像这样：

<body>
<div class="container body">
    <div class="main_container">

      <div id="menu_gauche" class="col-md-3 left_col">
            <div class="left_col scroll-view">
                <div class="navbar nav_title" style="border: 0;">
                    <a id="logoBoat" class="site_title" href="/"><i class="fa fa-ship"></i> <span>Control Docker!</span></a>
                </div>
                <div class="clearfix"></div>


                <!-- menu profile quick info -->
                <div class="profile clearfix">
                </div>
                <!-- /menu profile quick info -->

                <br/>

                <!-- sidebar menu -->
                <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
                    <div class="menu_section">
                        <!-- {{> loginButtons}} -->
                        <ul class="nav side-menu">
                            <li><a><i class="fa fa-desktop"></i> Docker machines <span class="fa fa-chevron-down"></span></a>

这里是结果的图片，红色的部分是菜单，黑色的部分是页脚，我们可以看到白色的身体。灰色部分是一个面朝上的面板，所以不要担心： {{3}}

Answer 1

两个[div class =“container body”]＆amp; [div class =“main_container”]也需要100％的高度，因为它们是menu_gauche的父元素。

尝试添加：

div.container, div.main_container {
    height: 100% !important;
}

Answer 2

这种情况正在发生，因为您忽略了<html>区域为height: 100%。 <body>被包裹在<html>区域内（我们主要忽略它，但它就在那里）。

因此，即使您提供<body> 100％的高度，它也不会覆盖整个高度，因为<html>未设置为height: 100%;。

因此，要解决此问题，请将<html>的高度设置为100％。

html {
  height: 100%;
}

Answer 3

好人们终于成立了！我需要像这样修改一下CSS（要点是添加position:fixed）

.nav-md .container.body .col-md-3.left_col {
    width: 230px;
    position: fixed;
    bottom:0;
    background-image: url(/navBar.jpg);
    color: #001155;
    height: 100% !important;

}

.nav-sm .container.body .col-md-3.left_col {
    width: 70px;
    padding: 0;
    z-index: 9;
    position: fixed;
    bottom:0;
    background-image: url(/navBar.jpg);
    color: #001155;
    height: 100% !important;
}

为什么我的孩子div不能占用父div的所有高度？

3 个答案: