Home/ Questions/Q 8390457
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T18:59:32+00:00

I have this code <!– <body> (automatically added by jsFiddle) –> <header id=header> <h1>Title</h1>

  • 0

I have this code

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

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

How can I stretch #mainContent to fill all the available space below #header ?

That’s for a Windows 8 app, so I can use CSS 3 (including -ms-grid-*) and JavaScript without worrying about browser support!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use display:table property for this:

    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;
}

    Check this http://jsfiddle.net/cD2RK/3/

    • 0