Установить DIV между двумя дивы

Question

Мой HTML:

<div id="header">some content</div> 
<div id="navbar">some items</div> 
<div id="container">some items</div> 
<div id="footer">some items</div> 

Мой CSS:

*{padding: 0; margin: 0;} 
#header{width: 100%; height: 15%; background-color: red;} 
#navbar{width: 100%; height: 10%; background-color: yellow;} 
#container{width: 70%; height: 65%; background-color: gray;} 
#footer{width: 100%; height: 10%; background-color: green;} 

Моя проблема заключается в том, что, если я слишком много контента на контейнере будет переполнять пространство и собирается положить на нижний колонтитул. Как я могу это исправить?

Answer 1

Самое простое решение - делать так, как комментарии к вашему сообщению говорят и делают ваш переполненный контент прокруткой вместо того, чтобы просто увеличиваться и увеличиваться, перекрывая нижний колонтитул. Сделать это довольно просто ...

В вашем CSS, измените контейнер следующим образом, это должно предотвратить совпадение проблем.

#container{ 
    width: 70%; 
    height: 65%; 
    max-height: 65%; 
    overflow:scroll; 
    background-color: gray; 
} 

Логически выше код должен работать, товарищи Stack Overflow Граждане пожалуйста исправить любые ошибки, которые я сделал, как я не проверял это явно .... то, что вы рассказываете браузер, чтобы сделать здесь есть контейнер, вы не позволили пройти более 65% высоты, если вы это сделаете, ваш переток будет прокручиваться, а ваш рост просто будет расти ...