为什么我的孩子div无法取得父母的所有高度？

继此question与我的完全一样，我试图让我的menu_gauche占据所有的高度。为什么我的孩子div无法取得父母的所有高度？

所以，当我看到与导航器中的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>

这里的结果的照片，红色部分是菜单，在黑色的页脚部分，我们可以看到的白车身。灰色部分是一个面板是颠倒身体所以不用担心：

来源

2017-04-03 Jerome

你能提供一个JSfiddle吗？ –

@OusmaneMahyDiaw它会很难，但让我试试 – Jerome

杰罗姆不担心，如果你不能。都很好。 –

好吧，大家好，我终于成立了！我需要修改一下这样的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; 
}

来源

2017-04-04 05:15:34 Jerome

既[DIV类=“容器主体”] & [DIV类=“main_container”]需要100％的高度以及，因为它们是menu_gauche的父元素。

尝试添加此：

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

来源

2017-04-03 12:37:29 digibucc

这个代码没有任何改变，尽管这是一个很好的输入 – Jerome

这很奇怪。现有类中可能会有某些东西阻止它的工作。如果你想再试一次，我做了一些改变。 – digibucc

现在他们有'高度：100％'的设置，但是白色块仍然在这里，在编辑 – Jerome

它的发生，因为你忽略了<html>面积为height: 100%。 <body>被包裹在<html>区域内（我们主要忽略它，但它在那里）。

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

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

html { 
    height: 100%; 
}

来源

2017-04-03 14:23:48 Sudipto

为什么我的孩子div无法取得父母的所有高度？

回答

相关问题