Lets assume I have the following layout (see image below)... I have a header (A) at the top, footer (C) that is always at the bottom and container (B) that is in the middle and should fill the space left between the header and the footer by 100%.
Can't think of any way how to achieve this using pure css. Any ideas would be appreciated!
Your question pretty much describes how standard block-level elements, such as DIVs, behave. The center div will always take up 100% of the space between the two, and it'll grow based on it's inner content.
That said, I'm going to assume you want a FIXED footer - one that stays positioned at the bottom of the browser window. This is achiavable using a number of techniques, one of which is using absolutly positioning:
<div id="header">Header</div>
<div id="content">Main Content</div>
<div id="footer">Footer</div>
Style:
#header, #footer, #content { position: absolute; left: 0; width: 100%; }
#header, #footer { overflow: hidden; background: #444; height: 100px; }
#header { top: 0; }
#content { top: 100px; bottom: 100px; overflow: auto; background: #CCC; }
#footer { bottom: 0; }
I came across this question and thought a more "modern" answer would be helpful. This layout is easy using flexbox..
https://www.codeply.com/go/1QgRb4uFmj
<header>
</header>
<main></main>
<footer>
</footer>
html, body {
margin: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
flex: none;
background: #ddd;
}
main {
overflow-y: scroll;
flex: auto;
}
Depending on how your page is set up, it may work if you set height: 100%; for (B) and position: absolute; for the container element. Here is an example:
HTML:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS:
#container {
height: 100%;
width: 100%;
background: green;
position: absolute;
}
#header, #footer {
height: 100px;
width: 100%;
background: red;
}
#body {
height: 100%;
width: 100%;
background: blue;
}
