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应该填充可用空间

回答

相关问题