Halten Seitenmenü 100% Höhe

Question

Ich habe ein Seitenmenü, das ich bei 100% Seitenhöhe behalten möchte.

Der Code ist im Grunde genau wie diese jetzt:

body, 
html { 
    width: 100%; 
    height: 100%; 
} 

.sideMenu { 
    width: 200px; 
    height: 100%; 
    float: left; 
} 

Das Problem dabei ist, dass die Seitenmenüs Höhe nicht mit dem Rest der Seite erstreckt. Zum Beispiel habe ich Eingabefelder, die zu einem Formular hinzugefügt werden können, und wenn einige Eingaben hinzugefügt wurden, erstreckt sich das Formular unterhalb des ursprünglichen Ansichtsanschlusses. Während das Menü nicht.

Heres ein jsfiddle zu demonstrieren https://jsfiddle.net/m5yfqdsu/, klicken Sie auf die Schaltfläche "Zeile hinzufügen", um Eingaben hinzuzufügen, bis theyre unterhalb des Ansichtsfensters.

Was ist also die beste Lösung, um das Menü auf 100% Höhe zu halten? Bevorzugen Sie eine CSS-Lösung, aber JS funktioniert bei Bedarf auch.

Answer 1

hinzufügen position: fixed; zu .sideMenu

// just a quick function to add more inputs 
 

 
$(document).ready(function() { 
 
    $(".add").on("click", function() { 
 
    $("fieldset").append("<div class='rowContainer'><label>Label:</label><input type='text' /></div>"); 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0 
 
} 
 

 
body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
fieldset { 
 
    padding: 10px; 
 
} 
 

 
.sideMenu { 
 
    width: 200px; 
 
    height: 100%; 
 
    background-color: #1c1c1c; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.wrapper { 
 
    margin-left: 200px; 
 
} 
 

 
input { 
 
    width: 100%; 
 
    max-width: 400px; 
 
    height: 40px; 
 
    display: block; 
 
    margin-bottom: 20px; 
 
    color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sideMenu"></div> 
 

 
<div class="wrapper"> 
 

 
    <h1>Page Title</h1> 
 
    <form> 
 
    <fieldset> 
 

 
     <div class="rowContainer"> 
 
     <label>Label:</label> 
 
     <input type="text" /> 
 
     </div> 
 

 
     <div class="rowContainer"> 
 
     <label>Label:</label> 
 
     <input type="text" /> 
 
     </div> 
 

 
     <div class="rowContainer"> 
 
     <label>Label:</label> 
 
     <input type="text" /> 
 
     </div> 
 

 
    </fieldset> 
 
    </form> 
 

 
    <button class="add">Add row</button> 
 
</div>

Answer 2

Sie dies auf vielfältige Weise lösen können.

Eine Möglichkeit besteht darin, einen Container mit einer Höhe von 100% zu erstellen, um die untergeordneten Elemente scrollbar zu machen. Auf diese Weise brauchen Sie nicht die tatsächliche absolute Regel, aber es erreicht das gleiche Ergebnis. Ich bevorzuge es nicht, absolute zu verwenden, weil das es einfacher macht, wenn Sie möchten, dass es schließlich reagiert.

Auf diese Weise können Sie die Sidebar und Inhalt separat scrollen. Beide werden nicht größer sein, als sie sein müssen. Wenn die Seitenleiste größer wird, wird sie auch scrollbar sein.

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
html, body, .wrapper { 
 
    height:100%; 
 
} 
 

 
.wrapper { 
 
    position:relative; 
 
    overflow-y:hidden; 
 
} 
 

 
.sidebar { 
 
    width:100px; 
 
    float:left; 
 
    height:100%; 
 
    overflow-y:auto; 
 
    background-color:red; 
 
} 
 

 
.content { 
 
    width:300px; 
 
    float:left; 
 
    height:100%; 
 
    overflow-y:auto; 
 
    background-color:blue; 
 
} 
 

 
.spacer { 
 
    height:1000px; 
 
}

<div class="wrapper"> 
 
    <div class="sidebar"> 
 
    sidebar 
 
    </div> 
 

 
    <div class="content"> 
 
    content 
 
    <div class="spacer"> 
 
     spacer 
 
    </div> 
 
    </div> 
 
</div>