0

私はこのコードを持っています

<!-- <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-grid-*を含む) と JavaScriptを使用できます。

4

1 に答える 1

2

これにはdisplay:tableプロパティを使用できます。

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-07T10:06:35.810 に答える