Menu
I have an HTML page with fixed height header and footer and a element in between.
I want the element to have always the total height of the screen (excluding the header and the footer). For example, let's say the total height of the screen is 1000px and each of the header/footer has fixed height of 60px --> the div element height should be 880px. Now, the challenge I have it to make it responsive (no matter what is the screen size, the behavior should be as described) WITHOUT using JavaScript/JQuery. CSS only.
I've started by using "height: 100%" but don't know how to proceed...
<html>
<head></head>
<body>
<header class="header">my header</header>
<div class="content">content</div>
<footer class="footer">my footer</footer>
</body>
</html>
http://codepen.io/anon/pen/QbGZgL
Note: IE 10 should be supported as well...
I have considered flexbox, but didn't understand how exactly I can use it for my needs. Let's say I have some text and some images in the content of the page. I do not want a vertical scroller to appear when the screen is smaller, I want the whole content to shrink so it will fill the available height.
Does CSS3 viewport units: vh/vw/vmin/vmax can help me here?
636
This is a simple setup with what I think you want to accomplish. IE10 support is possible only you have to prefix / use old syntax for the flex property.
We have a wrapper element to which we say: you are now a flex element and your child elements can be flex(ible) elements with display: flex;
For the direction we use column, default is 'row' but we want them under each other.
Finally we define heights to the header and footer and so to the main element: you have the flex property '1'. Which will fill up the space that is left over between the elements.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
height: 100%;
flex-direction: column;
-ms-flex-direction: column;
background: red;
}
header {
height: 100px;
background: blue;
}
main {
flex: 1;
background: orange;
}
footer {
height: 20px;
background: yellow;
}<div class="wrapper">
<header>
Header element
</header>
<main>
<h1> Main</h1>
</main>
<footer>
Footer
</footer>
</div>You can use absolute positioning to achieve this.
Try the following
CSS
.content {
position:absolute;
top:100px; /* make this equal to the height of your header tag */
bottom:100px; /* make this equal to the height of your footer tag */
left:0;
right:0;
}
header {
height:100px;
background:green;
}
footer {
height:100px;
position:absolute;
bottom:0;
left:0;
right:0;
background:red;
}
Give your header a fixed height.
Give your footer a fixed height and position:absolute with a bottom:0, left:0; and a right:0;.
Make your content div position:absolute and give it a left:0; and a right:0;. Make the top position equal to the height of your header and the bottom position equal to the height of your footer.
http://jsfiddle.net/z4h64juf/1/
Hope that helps.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
