Динамическая высота DIV относительно окна

Структура моего HTML являетсяДинамическая высота DIV относительно окна

<body> 
<div class="divHead"></div> 
<div class="divBody"></div> 
</body>

То, что я хочу сделать, это дать фиксированную высоту до divHeader, скажем, 100px, и пусть divBody расширить до конца страницы точно, без полос прокрутки для браузера.

Таким образом, если окно пользователя является 1000px, тело будет 900px и т.д. ...

Если я установить высоту divBody до 100%, это займет 100% тела, что означает волю создайте полосу прокрутки на странице.

Спасибо заранее,

источник

2013-06-03 Nisho

Никогда не забудьте Если бы они были полосами прокрутки? – crush

Вы можете использовать абсолютное позиционирование: скрипка: http://jsfiddle.net/Z4vNN/2/

.divHead { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 100px; 
    background-color: red; 
} 

.divBody { 
    position: absolute; 
    top: 100px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: green; 
    overflow: auto; 
}

источник

2013-06-03 15:04:32 crush

.divBody { 
    height: calc(100% - 100px); 
}

источник

2013-06-03 15:03:59

Calc - отличный инструмент в том случае, если он может гарантировать поддержку CSS3 для своей аудитории! Жаль, что для вычисления «calc» потребовалось столько времени, чтобы его можно было внедрить в спецификацию CSS. – crush

Жаль, что люди быстрее не модернизируют свои браузеры. –

Должно, вероятно, включить ссылку caniuse вместе с этим. – Michael

@crush, конечно, прав, но если абсолютное позиционирование путает другие элементы страницы вы можете избежать просто имея элементы, отображаемые в виде блоков: http://jsfiddle.net/kF5wQ/

#header { 
    height:100px; 
    width:100%; 
    background:red; 
    display:block; 
} 

#container { 
    height:100%; 
    width:100%; 
    background:blue; 
    display:block; 
    overflow:visible; 
}

источник

2013-06-03 17:47:12 peterpixels

Динамическая высота DIV относительно окна

ответ

Смежные вопросы