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

【问题标题】：Why my children div can't take all the height of the parent div?为什么我的孩子 div 不能占据父 div 的所有高度？
【发布时间】：2017-04-03 12:34:28
【问题描述】：

按照这个和我一模一样的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>

这是结果的图片，红色部分是菜单，黑色部分是页脚，我们可以看到白色的主体。灰色部分是身体上方的面板，所以不用担心：

【问题讨论】：

你能提供一个JSfiddle吗？
@OusmaneMahyDiaw 这会很难，但让我试试
Jerome 如果您不能，请不要担心。一切都很好。
@OusmaneMahyDiaw 这真的很难，因为我使用 Meteor + FontAwesome
Jerome，你能用完整的 HTML 更新你的帖子吗，以便我测试一下？

标签： html css meteor menu

【解决方案1】：

[div class="container body"] 和 [div class="main_container"] 都需要 100% 高度，因为它们是 menu_gauche 的父元素。

尝试添加这个：

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

【讨论】：

这很奇怪。现有类中可能有一些东西阻止它工作。如果你想再试一次，我做了一些更改。
现在他们有了height:100%的设置，但是白块还在，请看编辑中的图片
我会查看 'col-md-3' 和 'left_col' 以及 'main_container' 和 'container' 的 css。如果其中任何一个将 div 设置为跨度（内联块），它将不会使用 height 属性。如果您还没有真正检查 div 并查看哪个没有达到 100% 高度，请使用 firebug/dev 工具。它实际上是菜单还是父 div？如有必要，为每个 div 赋予不同的边框/背景颜色以进行区分。

【解决方案2】：

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

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

所以，要解决这个问题，请将<html> 的高度设置为 100%。

html {
  height: 100%;
}

【讨论】：

【解决方案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;
}

【讨论】：