Warum können meine Kinder div nicht die ganze Höhe des Elternteils div nehmen?

Nach diesem question wer ist genau das gleiche wie meins, ich habe versucht, meine menu_gauche nimmt die ganze Höhe.Warum können meine Kinder div nicht die ganze Höhe des Elternteils div nehmen?

Also, wenn ich Blick in die CSS mit dem Navigator:

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%; 
}

ich sehe meine body nachverfolgen 100% als die Antwort auf die Frage nehmen.

Dann suche ich in meinem Kind menu_gauche:

#menu_gauche { 
    height: 100% !important; 
}

Der Wert wird zu 100% so sollte es richtig?

Aber aus einem unbekannten Grund nimmt die menu_gauche nicht die ganze Höhe des Elternteils.

Jemand hat eine Idee, was könnte das passieren?
Mein html wie folgt aussehen:

<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>

Hier ein Bild des Ergebnisses ist der Teil in rot das Menü, das Teil in schwarz der Fußzeile, und wir können den Körper in weiß sehen. Der graue Teil ist eine Platte, die den Kopf der Körper ist so nicht darüber keine Sorge:

Quelle

2017-04-03 Jerome

können Sie eine JSfiddle bieten? –

@OusmaneMahyDiaw wird es schwer sein, aber lass mich versuchen – Jerome

Jerome mach dir keine Sorgen, wenn Sie nicht können. es ist alles gut. –

Ok Leute endlich habe ich gegründet! Ich musste ein bisschen die CSS so ändern (Hauptpunkt ist 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; 
}

Quelle

2017-04-04 05:15:34 Jerome

beide [div class = „Behälterkörper“] & [div class = „main_container“] müssen 100% der Höhe als auch , weil sie die übergeordneten Elemente für menu_gauche sind.

versuchen diese Zugabe:

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

Quelle

2017-04-03 12:37:29 digibucc

nichts mit diesem Code geändert, obwohl es eine gute Eingabe war – Jerome

das ist seltsam. Möglicherweise ist in den vorhandenen Klassen etwas vorhanden, das das Arbeiten verhindert. Ich habe ein paar Änderungen vorgenommen, wenn Sie es erneut versuchen möchten. – digibucc

Jetzt haben sie die Einstellung 'Höhe: 100%' aber der weiße Block ist immer noch hier, schaue das Bild in der Bearbeitung – Jerome

Es geschieht, weil Sie die <html> Bereich ignorieren height: 100% zu sein. Die <body> ist in den Bereich <html> gewickelt (wir ignorieren es meistens, aber es ist da).

Und deshalb, auch wenn Sie die <body> 100% Höhe geben, es wird nicht die gesamte Höhe abdecken, da die <html> nicht height: 100%; gesetzt.

Also, um das Problem zu lösen, setzen Sie Höhe auf 100%.

html { 
    height: 100%; 
}

Quelle

2017-04-03 14:23:48 Sudipto

Warum können meine Kinder div nicht die ganze Höhe des Elternteils div nehmen?

Antwort

Verwandte Themen