Einen div von 100% Höhe machen

Question

Ich entwerfe Ad-Admin-Panel für meine Website und vor allem habe ich eine Top-Navigationsleiste in Wrapper und danach habe ich 2 weitere divs.

1.For Seite Navigationsmenü (links)

2.Bei Rest der Seiteninhalt (rechts)

Ich möchte, dass meine Seite Navigationsmenü über die gesamte Höhe des Bildschirms abzudecken. aber irgendwie habe ich das nicht geschafft, ich habe die folgenden versuche ausprobiert.

erster Versuch (HTML-Code)

.mainSideNavBar { 
 
    width: 20%; 
 
    z-index: 0; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 63px; 
 
    height: 100%; 
 
} 
 
.sideNavBar { 
 
    width: 100%; 
 
    background-color: #303641; 
 
    transition: width 0.5s ease; 
 
    overflow-x: hidden; 
 
    border: 1px solid #454a54; 
 
    height: 100%; 
 
} 
 
.mainPageContent { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.pageContent { 
 
    width: 100%; 
 
    background-color: #fff; 
 
    padding-left: 20%; 
 
    transition: width 0.5s ease, padding-left 0.5s ease; 
 
    border: 1px solid black; 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 

 
    <div class="mainSideNavBar"> 
 
    <div class="sideNavBar" id="sideNavBar"> 
 
     <ul> 
 
     <li><a href="#"><i class="fa fa-television"></i><span class="" id="textHideD">Dashboard</span></a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-envelope-o"></i><span class="" id="textHideN">Notifications</span></a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-users"></i><span class="" id="textHideM">Manages Users</span></a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-exchange"></i><span class="" id="textHideB">Bet Management</span></a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-pencil-square-o"></i><span class="" id="textHideR">Modify Rules</span></a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-credit-card"></i><span class="" id="textHideP">Payment</span></a> 
 
     </li> 
 

 
     </ul> 
 
    </div> 
 
    <!--End sideNavBar--> 
 
    </div> 
 
    <!--End mainSideNavBar--> 
 

 
    <div class="mainPageContent"> 
 
    <div class="pageContent" id="pageContent"> 
 
     <h1>My Content</h1> 
 
    </div> 
 
    </div>

Das Problem mit diesem Code ist es, wenn der Inhalt in .PageContent Klasse perfekt funktioniert, ist kleiner als die Bildschirmhöhe (keine Bildlaufleiste showing), aber wenn der Inhalt in der .PageContent-Klasse größer ist als die aktuelle Bildschirmhöhe (Bildlaufleiste zeigt), dann zeigt meine linke Navigation eine kleine Lücke zwischen Top-Navigation und it self wegen (position: fixed).

Hier ein Screenshot:

Und in meinem zweiten Versuch, ich meine Position ändern: auf Position fixiert: absolute und dann ein neues Problem erscheint, Seitenleiste Navigation Zusammenbruch der Hälfte der Höhe der die aktuelle Bildschirmhöhe mit einer Bildlaufleiste

Css-Code für HTML und Körper

html , body{height:100%;} 

Ich bin fest, vorschlagen mir ein paar gute (richtige) Weg, es zu tun.

Answer 1

Ich denke, Sie können absolute oder feste Positionierung für Ihre Sidebar entfernen.

Setzen Sie es einfach als float: left;, halten Sie die aktuelle Breite (20%).

Dann für Ihre .mainPageContent, setzen Sie es als float: right; und füllen Sie die Breite in '%' mit dem Padding-links und die Breite Ihres Inhalts.

Dann, für die Höhe, verwende ich min-height: 100vh;, die garantiert, um die gesamte Höhe des Bildschirms zu füllen (vh = Höhe anzeigen) und wird ziemlich gut von Browsern unterstützt.

So können Sie min-height: 100vh; auf Ihrer Sidebar setzen, ich denke, es wird den Trick tun.

Hoffe, das hilft!

Answer 2

Wie Sie feste Positionierung verwenden, anstatt die height der Einstellung zu sein 100%, verwenden Sie die top & bottom Eigenschaften, top Wert gleich die Höhe der Kopf- und bottom einen Wert von 0 geben.