Html плавающий, высота 100%

Question

Я пытаюсь создать свой сайт, но у меня проблема с размером экрана. Я хочу сделать его немного отзывчивым, а мой макет - заголовок сверху, затем меню и нижний колонтитул, но на 25% ширины, и я не знаю, как изменить его размер до 100%. Я хочу, чтобы это выглядело так: http://s32.postimg.org/9pa325s3p/img.png
Мой код:

<header>header </header> 
<section id="menu">menu</section> 
<footer>footer </footer> 

код CSS не важно.

Answer 1

Вот решение, которое должно работать в браузерах предварительного CSS3.

Меню и нижний колонтитул находятся внутри оболочки обертки. Обертка div получает height:100% и начинается в верхней части страницы, используя margin-top:-40px. Обертка div получает position:relative, так что все элементы внутри расположены относительно этого элемента контейнера.

Для меню, мы устанавливаем абсолютно с top:40px, поэтому мы не перекрываем заголовок и bottom:40px, поэтому мы останавливаемся перед нижним колонтитулом.

Нижеследующие стили очевидны - position:absolute с bottom:0, поэтому мы попали в нижнюю часть страницы.

<style> 
header { 
    height:40px; 
    background-color:yellow; 
} 
#menufootercontainer { 
    position:relative; 
    height:100%; 
    margin-top:-40px; 
    position:relative; 
} 
#menu { 
    width:80px; 
    position:absolute; 
    top:40px; 
    bottom:40px; 
    background-color:green; 
} 
footer { 
    width:80px; 
    height:40px; 
    position:absolute; 
    bottom:0; 
    background-color:red; 
} 
</style> 

<header>header</header> 
<div id="menufootercontainer"> 
<section id="menu">menu</section> 
<footer>footer</footer> 
</div> 

Answer 2

Попробуйте использовать vh единиц там:

#menu { 
    height: calc(100vh - 80px); 
} 

Answer 3

Самое простое, что вы можете сделать, это обернуть раздел и колонтитула элементы в «обертке» DIV, или любой другой элемент блочного уровня (в сторону, раздел, Nav и т.д.) вам нравится, как это:

<div ID="sidebar-wrapper"> 
    <header>header </header> 
    <section id="menu">menu</section> 
    <footer>footer </footer> 
</div> 

После того, как вы сделаете это, это так просто, как дать # Sidebar-обертку высоту 100% и шириной 25%. И, наконец, дайте вашему меню и нижнему колонтитулу нужные высоты в процентах.

#sidebar-wrapper { 
    width: 25%; 
    height: 100%; 
} 
section { 
    height: 90%; 
} 
footer { 
height: 10% 
} 

Как только это будет сделано, ваш макет должен быть таким же, как на картинке.

P.S: Если вы планируете иметь навигационные ссылки в этом элементе раздела (как я полагаю, вы это делаете), вы должны использовать «nav» вместо того, чтобы быть более смысловым :).