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所有可用空間？

這是一個Windows 8的應用程序，所以我可以使用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 2012-08-07 10:09:52

DIV應該填充可用空間

回答

相關問題