How to build flexible structure? - html

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

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 2

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

Answer 3

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 4

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 5

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>