Хранение бокового меню 100% высота

Question

У меня есть боковое меню, которое я бы хотел сохранить на 100% высоте страницы.

Код в основном так же, как это прямо сейчас:

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

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

Проблема с этим состоит в том, что высота бокового меню не распространяется с остальной частью страницы. Например, у меня есть поля ввода, которые могут быть добавлены в форму, и когда добавлено несколько входов, форма распространяется ниже исходного порта представления. Пока в меню нет.

Нажмите, чтобы показать https://jsfiddle.net/m5yfqdsu/, нажмите кнопку «добавить строку», чтобы добавить входные данные, пока они не под окном просмотра.

Итак, что является лучшим решением для сохранения меню на высоте 100%? Предпочитаете решение для CSS, но JS также работает, если необходимо.

Answer 1

Добавить position: fixed; в .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

Вы можете решить эту проблему несколькими способами.

Один из способов - сделать контейнер со 100% высотой, делая его дочерние элементы прокручиваемыми. Таким образом, вам не нужно правильное правило absolute, но оно достигает того же результата. Я предпочитаю не использовать absolute, потому что это облегчает, если вы хотите, чтобы он был отзывчивым в конечном итоге.

Таким образом, вы можете прокручивать боковую панель и содержимое отдельно. Оба они не будут больше, чем они должны быть. Если боковая панель растет, она также будет прокручиваться.

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