Примушуючи головний розділ сторінки заповнити залишок висоти лише CSS - css, макет

У мене є дві діви, як показано нижче:

<div class="header">
<h1>My Cool Site</h1>
</div>

<div class="main">
Hello world
</div>

Заголовок діва повинен займати стільки місця, скільки в ньомупотреби. Основний розділ повинен точно заповнити решту висоти сторінки - смуга прокрутки не повинна з’являтися. Чи можливо це робити тільки з CSS? Немає JavaScript. Ось моя невдала спроба зробити це: http://jsfiddle.net/nareshbhatia/HrsHR/

Редагувати: Я трохи змінив jsFiddle, щоб уточнитинамір, що область вмісту повинна розширюватися на повну висоту. Вміст "головного" тепер замінено елементом SVG, який тягнеться до всієї площі діва.

Відповіді:

Спробуйте скористатися calc ()

Робочий приклад

.main {
background-color: #BAA378;
border: 10px solid #453823;
padding: 10px;
height: calc(100% - 60px); /* 100% - height of header */
}

Або ви можете кинути це і використовувати jQuery:

Робочий приклад 2

 layout = (function () {
var w = $(window).height();
var h = $(".header").outerHeight();
var x = w - h;
$(".main").outerHeight(x);
});

$(document).ready(layout);
$(window).resize(layout);

Спробуйте це рішення. Це розташувати вашого дива внизу.

.main {
background-color: #BAA378;
border: 10px solid #453823;
padding: 10px;
height: 86%;
position:fixed;
bottom: 0;
width: 100%;
}

http://jsfiddle.net/DCM8E/

Ви можете створити потрібний зовнішній виглядобгортку, щоб створити рамку замість вашого вмісту. Тоді ваш вміст div не займає повний зріст, але відображається в звичайному місці під заголовком і обробляється на висоту на overflow: hidden;. Трохи обману, щоб помістити заголовок на рамку обгортки, і у вас є те, що вам потрібно принаймні на вигляд.

http://jsfiddle.net/AjtFc/3/