I'm looking for a way to have a layout that meets the behavior below:
The big question here is to make the central div delimit to the ends of the other div's, so that they do not overlap with that.
By making an allusion to the Desktop world, I would like to add a CSS class to my <div> that simulates the DockStyle.Fill .
Is there any way to do this with CSS?
You can use flexbox
body, html {
position: relative;
display: flex; /* repare aqui */
flex-direction: column; /* repare aqui */
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
header, footer {
width: 100%;
height: 40px;
background-color: white;
box-shadow: 0px 0px 10px black;
z-index: 2;
}
section {
flex: 1; /* repare aqui - vai ocupar todo o espaço livre no elemento pai, neste caso o body */
overflow-y: auto;
background-color: whitesmoke;
z-index: 1;
}
#placebo {
height: 5000px;
}<header></header>
<section>
<div id="placebo"></div>
</section>
<footer></footer> I do not know how the behavior of DockStyle.Fill works, but you could do something like this:
HTML:
<div id='header'></div>
<div id='content'></div>
<div id='footer'></div>
CSS:
*{
margin: 0;
padding: 0;
}
#header{
position: fixed;
top: 0;
width: 100%;
height: 100px;
background-color: red;
}
#content{
position: fixed;
top: 100px;
bottom: 100px;
width: 100%;
background-color: gray;
}
#footer{
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
background-color: blue;
}
See here at JSFiddle
Similar to the idea already posted there is this way:
body{
margin: 0;
padding: 0;
height: 100%;
padding: 50px 0;
}
header, footer{
height: 50px;
width: 100%;
background: #333;
position: fixed;
}
header{ top: 0;}
footer{ bottom: 0;}
#content{
background: gold;
position: absolute;
width: 100%;
bottom: 50px;
top: 50px;
}<header></header>
<div id="content"></div>
<footer></footer> You assign header and footer a desired height , these heights will be used later to specify the div#content spacing so that it occupies the remaining space.
This is done by assigning both a position: fixed , and bottom and top .
With div#content having a position: absolute you do not need to specify height , but top and bottom , which are the height of header and footer , respectively. So the% with% of this height will be automatic. If you want content with a scroll bar, just give div .