爲什麼我的孩子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無法取得父母的所有高度？

回答

相關問題