DIV должен заполнить свободное пространство

Я это codeDIV должен заполнить свободное пространство

<!-- <body> (automatically added by jsFiddle) --> 
<header id="header"> 
    <h1>Title</h1> 
</header> 

<div id="mainContent"> 
    Some text. End.<br /> 
</div> 
<!-- </body> -->

Как я могу растянуть #mainContent, чтобы заполнить все доступное пространство ниже #header?

Это для 8 приложения Windows, так я могу использовать CSS 3 (в том числе -ms-сеточный *) и JavaScript, не заботясь о поддержке браузера!

источник

2012-08-07 user897029

Вы можете использовать дисплей: таблица для этого свойство:

HTML

<div class="parent"> 
    <header id="header"> 
    <h1>Title</h1> 
    </header> 

    <div id="mainContent"> 
     Some text. End.<br /> 
    </div> 
</div>

CSS

body,html{ 
    height:100%; 
} 
.parent{ 
    display:table; 
    height:100%; 
    box-sizing:border-box; 
    width:100% 
} 
#header, #mainContent { 
    background:red; 
    display:table-row; 
} 

/* How can I make #header to fill the full available left space */ 
#header { 
    height:10%; 
    background:green; 
}

Проверить это http://jsfiddle.net/cD2RK/3/

источник

2012-08-07 10:06:35 sandeep

Спасибо, это хорошо. Я проверю его, когда моя переустановка Visual Studio, наконец, завершится;) – user897029

DIV должен заполнить свободное пространство

ответ

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