How to build flexible structure?

Question

I want to build a flexible structure with `CSS like this

TOP and BOTTOM divs have fixed height, while central box have responsive height. And all of them should cover the whole container div.

Can anyone tell me please how to do this?

Answer 1

Here you have an example with CSS split for better understanding

Don't forget to vote and close the question, a lot of people tend to forget this, thanks.

/* flexbox */        
main, header, footer, article   { display: flex }
main                            { justify-content: space-between; flex-direction: column }
article                         { flex: 1 }                         /* fill available space */

/* flexbox optional rule */
header, footer, article         { justify-content: center; align-items: center }

/* sizing */
html, body, main                { height: 100% }                    /* CSS needs to know how to fill */
main, header, footer, article   {  width: 100%; max-width: 100% }   /* max- for cross-browser quirks */
header, footer                  { height: 50px; line-height: 50px } /* same line-height centers text vertically */

/* styling */        
body                            { color: white; margin: 0; padding: 0 }
header, footer                  { background-color: black }
article                         { background-color: red }

    <main>
        <header>some header</header>
        <article>some article</article>
        <footer>some footer</footer>
    </main>

Answer 2

body{position: relative;padding: 0px; margin: 0px;}
.top-sec{   background: #30a7fc none repeat scroll 0 0;
    height: 40px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;}
.middle-sec{
  bottom: 0;
    clear: both;
    left: 0;
    overflow-x: auto;
    overflow-y: initial;
    position: fixed;
    top: 40px;
    width: 100%;
    background: #000; color: #fff;
	}
.bottom-sec{
 background: #0000ff none repeat scroll 0 0;
    bottom: 0;
    height: 24px;
    left: 0;
    min-width: 100%;
    padding: 0;
    position: fixed;
    right: 0;
    z-index: 1000;
	}

<div class="top-sec"></div>
<div class="middle-sec">Please put here big data</div>
<div class="bottom-sec"></div>

Answer 3

You can also try like this-

*{margin: 0;padding:0;}
    html, body {height: 100%;color:#fff;}
    header{height:50px;background: #000;position: absolute;top:0;width: 100%;}
    section {min-height: calc(100% - 50px);margin-bottom: -50px;background:red;padding-top:50px;}
    section:after {content: "";display: block;}
    footer, section:after {height: 50px; }
    footer{background: #000;}

<header>
        Header
    </header>
    <section>
        Here is Content and all.
    </section>
    <footer>
        Footer
    </footer>

Answer 4

Given this markup:

<div class="container">
  <div class="header"></div>
  <div class="main"></div>
  <div class="footer"></div>
</div>

These are the styles you need to use:

.container {
  height: 100vh;
  display: flex;
}

.header, .footer {
  /* don't grow, don't shrink, be 50px */
  flex: 0 0 50px;

  background: black;
}

.main {
  /* grow and shrink with the ratio of one */
  flex: 1 1;

  background: red;
}

Demo: http://jsbin.com/horarivopo/1/edit?html,css,output

Although be aware of browser support (IE10+ w/ prefixes): http://caniuse.com/#feat=viewport-units,flexbox

Answer 5

Quite easy.

Basic html:

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>

and basic css:

body, html {
    height:100%;
    margin:0;
}
.header, .footer {
    height:30px;
    background-color:black;
    width:100%;
}
.main {
    height:calc(100% - 30px - 30px);
    background-color:red;
    width:100%;
}

Just don't forget that when using "height" in % you need to include a fixed height in all parents of the element to make it work (in this case bodyand html)

JSFIDDLE