How can I make an empty div display between the header and footer?
Question
I am trying to create an empty div between my header and my footer , as my webpage has a background image which I would like to be clear of any elements.
The full code is here
* { box-sizing: border-box; } html { font-size: 16px; background: url('http://placekitten.com/200/300') no-repeat fixed center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /*-------------- HEADER -----------------------*/ a { text-decoration: none; color: black; } #header h1 { font-family: "Frijole", cursive; float: left; padding-left: 20px; } #header ul { font-family: "Frijole", cursive; float: right; padding: 20px 20px 0 0; display: inline-block; } #header ul, li { display: inline-block; margin-bottom: 5px; } /*-------------- EMPTY DIV -----------------------*/ #empty_div { height: 800px; } /*-------------- FOOTER -----------------------*/ #footer { clear: both; padding-left: 20px; text-align: center; } #footer p { margin: 5px 0; } .social_icon { display: inline; width: 1.25rem; height: 1.25; margin-right: 0.3215rem; margin-bottom: 0; }
<div id="header"> <a href="index.html" id="logo"> <h1 class="headings">THE 100 DAYS PROJECT</h1> </a> <nav> <ul> <li><a href="new_treehouse.html" class="selected">Portfolio</a> </li> <li><a href="about.html">About</a> </li> <li><a href="contact.html">Contact</a> </li> </ul> </nav> </div> <div id="empty_div"> </div> <div id="footer"> <a href="http://twitter.com/cilvako"> <img src="http://placekitten.com/200/300" alt="Twitter Logo" class="social_icon"> </a> <a href="http://facebook.com/"> <img src="http://placekitten.com/200/300" alt="Facebook Logo" class="social_icon"> </a> <p>© 2016 Silvia Bogdan</p> </div> </body>
Can I make the empty div to display and take the whole height of the page (so it creates empty space between the header and the footer )?
I have set a value ( min-height: 800px , for example), but when resizing the browser (I tried displaying on different devices using Developer Tools), the footer it's placed all over the place and never at the of bottom of the page.
4 answers
solution1
4 ACCPTED 2016-07-03 19:42:19
I think it is this what you want to do. Open it in full screen to see a better result.
#header{ background: #ebebeb; position: absolute; top: 0; left: 0; width: 100%; } #footer{ background: #dbdbdb; position: absolute; left: 0; bottom: 0; width: 100%; }
<body> <div id="header"> <h1> Header </h1> </div> <div id="footer"> <h1> Footer </h1> </div> </body>
By default the position of a div is static . You need to make it absolute or fixed and than add properties like top or left or bottom or right to place the element exactly where you want.
Here are some links where you can see the difference between position: absolute; and position: fixed; .
http://www.w3schools.com/cssref/pr_class_position.asp http://www.w3schools.com/css/css_positioning.asp
I hope this helps.
solution2
3 2016-07-03 19:42:59
As i already suggested in my comment, you better don' try to use an element to define or manipulate the behaviour of another element.
So in your case, you probably want to know how to make your footer stick to the bottom of the page, while your content takes up all the remaining space between your header and your footer.
There are of course several ways, a basic approach could look like this:
<div id="header">
Some content here..
</div>
<div id="content">
Your content here...
</div>
<div id="footer">
Some stuff here..
</div>
with a css like this:
#header {
height: 100px;
width: 100%;
background: red;
}
#content {
display: table;
position: absolute;
top: 100px;
bottom: 50px;
width: 100%;
padding-bottom: 50px;
background: green;
}
#footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background: blue;
}
As you see, for this example the header does nothing special. It takes up 100px at the top of your page and stretches to 100% width .
The Footer is set to position: fixed at the bottom ( bottom: 0 or 0px ), takes up 50px height and stretches also 100% width of its parent container (in our case it's our body).
A little bit more special is our div #content . First we position it absolute at the top (with the height of our #header ) and make it take up all of the width .
Then we have to cover several scenarios:
First scenario: We have no actual content in our
#content. To make the div stretch to to the bottom until it hits the footer, we have to setbottom: 50px.Second scenario: Our content takes up more space then we see: If this is the case, as soon as you scroll down the background wouldn't be filled anymore ( in our case green ), because of this, we add
display: tableto make our div stretch its dimensions always to the same height of its inner contents (Our text for example).
And finally, because our #footer is positioned fixed and would lay over our #content we have to add padding-bottom: 50px to our #content .
Here is a Fiddle for you with this example.
solution3
1 2016-07-03 19:57:01
You can do what you want by using the flexbox , with this you don't need to work with fixed height in header / footer or even the middle div #empty_div
I also tweaked you code a bit.
*, *::before, *::after { box-sizing: border-box; } body, html { height: 100%; margin: 0 } html { font-size: 14px; /* changed for demo */ background: url('http://placekitten.com/200/300') no-repeat fixed center; background-size: cover } #wrap { display: flex; flex-direction: column; height: 100% } a { text-decoration: none; color: black; } /*-------------- HEADER -----------------------*/ #header { display: flex; font-family: "Frijole", cursive; } #header h1 { padding-left: 20px } #header nav { margin-left: auto } #header ul { padding: 20px 20px 0 0; } #header li { display: inline-block; margin-bottom: 5px } /*-------------- EMPTY DIV -----------------------*/ #empty_div { flex: 1; background: red } /*-------------- FOOTER -----------------------*/ #footer { text-align: center } #footer p { margin: 5px 0 } .social_icon { display: inline; width: 1.25rem; height: 1.25rem; margin: 0 0.3215rem 0 0 }
<div id="wrap"> <div id="header"> <a href="index.html" id="logo"> <h1 class="headings">THE 100 DAYS PROJECT</h1> </a> <nav> <ul> <li><a href="new_treehouse.html" class="selected">Portfolio</a> </li> <li><a href="about.html">About</a> </li> <li><a href="contact.html">Contact</a> </li> </ul> </nav> </div> <div id="empty_div"></div> <div id="footer"> <a href="http://twitter.com/cilvako"> <img src="http://placekitten.com/200/300" alt="Twitter Logo" class="social_icon"> </a> <a href="http://facebook.com/"> <img src="http://placekitten.com/200/300" alt="Facebook Logo" class="social_icon"> </a> <p>© 2016 Silvia Bogdan</p> </div> </div>
If you don't want/need the middle div, you can still use flexbox like this:
*, *::before, *::after { box-sizing: border-box; } body, html { height: 100%; margin: 0 } html { font-size: 14px; /* changed for demo */ background: url('http://placekitten.com/200/300') no-repeat fixed center; background-size: cover } #wrap { display: flex; flex-direction: column; justify-content: space-between; height: 100% } a { text-decoration: none; color: black; } /*-------------- HEADER -----------------------*/ #header { display: flex; font-family: "Frijole", cursive; background: rgba(255, 255, 0, .7) } #header h1 { padding-left: 20px } #header nav { margin-left: auto } #header ul { padding: 20px 20px 0 0; } #header li { display: inline-block; margin-bottom: 5px } /*-------------- FOOTER -----------------------*/ #footer { text-align: center; background: rgba(255, 255, 0, .7) } #footer p { margin: 5px 0 } .social_icon { display: inline; width: 1.25rem; height: 1.25rem; margin: 0 0.3215rem 0 0 }
<div id="wrap"> <div id="header"> <a href="index.html" id="logo"> <h1 class="headings">THE 100 DAYS PROJECT</h1> </a> <nav> <ul> <li><a href="new_treehouse.html" class="selected">Portfolio</a> </li> <li><a href="about.html">About</a> </li> <li><a href="contact.html">Contact</a> </li> </ul> </nav> </div> <div id="footer"> <a href="http://twitter.com/cilvako"> <img src="http://placekitten.com/200/300" alt="Twitter Logo" class="social_icon"> </a> <a href="http://facebook.com/"> <img src="http://placekitten.com/200/300" alt="Facebook Logo" class="social_icon"> </a> <p>© 2016 Silvia Bogdan</p> </div> </div>
solution4
1 2016-07-03 20:28:30
you just need to give the Head element a height because you didn't give it any height it thinks it has a height of 0 so it doesn't push the empty div down , so you see the overlap.
just enter this into the css under header and it will work fine.
#header { height:100px; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.