I have a web page that is divided into header, page and footer.
The problem is that I made the page height :auto;.
But it does not work and I need the page to automatically grow up.
This is what I have in the CSS:
/* Page */
#page-wrapper {
overflow: auto;
height: auto;
text-align: center;
}
#page {
overflow: auto;
width: 1120px;
margin: 0px auto;
padding: 50px 40px;
color: #8F8F8F;
min-height:700px;
height:auto;
}
And HTML:
<body>
<div id="banner">
<div class="img-border">
<div id="header-wrapper">
<div id="header">
<div id="logo">
</div>
</div>
</div>
</div>
</div>
<div id="wrapper">
<div id="page-wrapper">
<div id="page">
<div id="wide-content">
</div>
</div>
</div>
</div>
It is very unclear what it is that you want.
In your first line you say you want a footer, but your HTML and CSS don't show any footers.
If you want a footer which sticks to the bottom of the page, have a look at the CSS Sticky Footer.
You shouldn't need the height in there at all... a div will grow or shrink with the amount of content inside of it. Try removing height: auto; completely.
If though you mean that you want to make the content section 100% of the page height even when there isn't enough content, this should help Make div 100% height of browser window
Do you mean you want the footer of your page at the bottom and the div imbetween to take up the remaining space (it's a little difficult to determine from your wording)?
If this is you what you want, I'd suggest looking at this blog post:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
HTML summary:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS summary:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
Related
This question already has answers here:
Make footer stick to bottom of page correctly [duplicate]
(10 answers)
Closed 8 years ago.
I cannot make a footer sticky in the bottom of the page. I have read dozens of tutorials and still have a problem. In pages with contents that cover all the window, the footer is sticked in the bottom without a problem. But in pages without a lot of content, the footer is in the middle of the page.
<html><body>
text here text here
<footer id="footer">
Im in the footer and bottom of the page!
</footer>
</body></html>
body {
background: url('/static/img/bg.png');
min-width: 1300px;
height: 100%;
}
footer {
clear: both;
padding-top:20px;
padding-bottom:20px;
background-color:#222;
margin-top: 15px;
color: white;
text-align: center;
}
I have tried to add position:absolute or position:fixed and bottom:0px in the footer, but then the results are worst. There is a blank space after footer.
You can use position:fixed and bottom:0px; like this:
footer {
clear: both;
padding-top:20px;
padding-bottom:20px;
background-color:#222;
margin-top: 15px;
color: white;
text-align: center;
position:fixed;
bottom:0px;
width:100%;
}
The footer remains at the bottom no matter how much content the body has.
To remove white spaces around it and make it's width 100% you need to remove margin and padding:
body,html {
background: url('/static/img/bg.png');
width:100%;
height: 100%;
padding:0;
margin:0;
}
JSFiddle Demo
You can try this
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
This an HTML
Below is the basic structure of the HTML code. You'll notice how the footer sits outside of the wrap .
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
You would place your content elements inside the main . For example, if you were using a 2 column floating layout you might have this;
<div id="wrap">
<div id="main">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
A header could be placed inside the wrap but above the main like this;
<div id="wrap">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
I can't get the footer to stick at the bottom of the page. If there is less content, i need it to be displayed without any scroll of course and if there is more content then in the end. I have the following code:
<div id='wrapper'>
<div id="top_bar">
</div>
<div id="top_add">
<div if="left_logo">LOGO</div>
<div id="top_add">ADD</div>
</div>
<div id="content" style="height:auto;width:100%;">
<div style="font-size:25px;width:90%;float:left;height:auto;">ABCD
</div>
<div style="width:10%;height:auto;float:right;">ADV.
</div>
</div>
</div>
<div id="foot">
Contact Us
</div>
CSS:
html, body {
height:100%;
width:100%;
margin: 0;
padding: 0;
}
#wrapper {
height:100%;
width:100%;
min-width:1300px;
min-height:100%;
}
#top_bar {
width:100%;
height:45px;
min-width:1200px;
}
#top_add {
margin-left:15px;
height:14%;
width:100%;
min-width:1200px;
min-height:130px;
}
#left_logo {
width:215px;
height:100%;
float:left;
min-width:200px;
padding-left:20px;
}
#right_add {
width:980px;
height:100%;
float:left;
background-color:#E8E8E8;
min-width:750px;
}
#foot {
background-color:#333333;
width:100%;
height:250px;
}
What am i doing wrong? When the content size is small, the property defined as max-height:100% takes the whole page and shows is empty and displays the footer in the end which is found after scrolling.
you want to sticky footer right, so you must be used a css position to set it fixed anywhere in the page
for bottom div add this css
#foot{background-color:#333333;position:fixed;bottom:0px;width:100%;}
please visit live demo here http://jsfiddle.net/Zsg8G/
thank you...
EDITED: hello, i found the your problems please now try this code
<div id='wrapper'>
<div id="top_bar">
</div>
<div id="top_add">
<div if="left_logo">LOGO</div>
<div id="top_add">ADD</div>
</div>
<div id="content" style="">
<div>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>ABCD<br/><br/>
</div>
<div style="width:10%;height:auto;float:right;">ADV.
</div>
</div>
</div>
<div id="push"> </div>
<div id="foot">
Contact Us
</div>
html,body{height:100%;}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* Negative indent footer by it's height */
}
#push,#footer{height:100px;}
here you must be remove the float: left...
live demo with: more content: http://jsfiddle.net/SCr7b/1/ and with less content: http://jsfiddle.net/HYf7q/
thank you..
Check out Chris Braco's solution to this: http://cbracco.me/css-sticky-footer-effect/
Essentially you need to ensure there is padding below your body content to prevent an overflow under the footer, and use position: absolute; on the footer.
Here's your code with a working footer: http://codepen.io/anon/pen/IbmiC
Let me know if you have any issues with this.
I've been trying for hours now couldn't find any solution for my problem I've made my footer stick to the bottom by position:fixed;bottom:0; the footer gets to bottom but when my content is more the footer doesn't expand to the bottom relative to the content so i've did this made a container div and placed my footer in it
<div id="container">
<div id="body">
</div>
<div id="footer">
</div>
</div>
#container
{
position:relative;
}
#footer
{
position:absolute;
bottom:0;
height:30px;
}
so far so good but when i try to increase my footer size(height) to 300PX it occupies my entire page I just want the footer to be at bottom with same height i have even tried making the #body{min-height:500px;} but my footer still doesn't go down with 300px of height.
To be exact i want a footer like stackoverflow but when there is no content i should still stick to bottom with a min body height.
Hi please follow the link http://jsfiddle.net/cooolkiran/yVC8r/
<div class="page-wrap"> Content</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}
Add:
html, body {height: 100%;}
to your CSS and see if that works.
Replace -
<div id="container">
<div id="body">
</div>
<div id="footer">
</div>
</div>
with following code - (try with closing div id="body" after footer division)
<div id="container">
<div id="body">
<div id="footer">
</div>
</div>
</div>
jsfiddle - http://jsfiddle.net/nMVA5/
Try this:
<div id="container">
<div id="body">
this is body
</div>
<div id="footer">
this is footer
</div>
</div>
#container
{
border:solid red thin;
position:relative;
height:100px;
}
#footer
{
border:solid red thin;
position:absolute;
bottom:0;
height:30px;
width:100%;
}
demo link:http://jsfiddle.net/yVC8r/2/
My HTML looks like the following, without the content though as the following is only needed to answer my question:
<html>
<body>
<div class="container">
<div class="socialmedia"></div>
<div class="navbar"></div>
<div class="mainbody></div>
<div class="footer"></div>
</div>
</body>
</html>
I've been trying to get my footer to remain at the bottom of my webpage, beneath .mainbody. The problem though, is that the footer seems to sit at the bottom of my window only, not at the bottom of the webpage which could extend well below my actual window when I have a lot of content. Right now, I have all the div's above set to position "absolute"; as well the html and body are styled in the following way:
html, body{
height:100%;
margin:0;
padding:0;
}
html { background: url(/img/multiblock.png)repeat center center fixed; }
}
Now, the only way I can get my footer to remain at the bottom of the webpage is to set top:-3998px (or whatever the height of my largest window is). Obviously this won't work once a webpage has enough content on it to expand it past that height. If I set position to relative, it appears at the top of my whole webpage and when positioned absolute it appears at the bottom of the viewable window only. You can check out the website at http://www.edmuncovered.com to see what I mean or to check the rest of the code. Parts of my website include adding content every day or so so I want to make sure the webpage can increase in height with added content, but that the formatting stays the same and the footer obviously stays at the bottom. Any ideas?
I guess this is what you need...
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
You can try something like this:
CSS:
.socialmedia, .navbar, .mainbody, .footer
{
border: 1px solid grey;
margin-top: 5px;
width: 800px;
}
.socialmedia
{
height: 20px;
}
.mainbody
{
min-height: 980px;
}
.footer
{
height: 25px;
}
Html:
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</div>
<div class="footer">Footer</div>
</div>
Working jsFiddle: http://jsfiddle.net/LrfXr/
I'm going to assume this is a questions similar to the one here: How to Stop Sticky Footer at Content DIV
At which there are a few good answers.
Links on that page:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://twitter.github.io/bootstrap/examples/sticky-footer.html
Basically you're looking for a footer that attaches itself to the bottom of the viewport but also extends should the content push it off the viewport. Martin Bean and Ryan Fait have the best methods of this. The bootstrap's method is a variation of this method too.
Happy hunting.
Here is the jsFiddle link. Followings are your css and html code:
HTML code
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</br>Mainbody</br>Mainbody</br>Mainbody</div>
<div class="footer">Footer</div>
</div>
CSS
*{
margin:0;
padding:0;
}
body {
background-color:#E4E2E2;
color:#fff;
}
.container {
min-height:100%;
/*position:relative;*/
}
.socialmedia {
background-color:#186301;
padding:10px;
}
.navbar {
background:#A60206;
padding:10px;
min-height:30px;
}
.mainbody {
padding:20px;
background-color:#6D0594;
}
.footer {
position:absolute;
bottom:0;
padding:2%;
background-color:#000;
width:96%;
}
This is working for me:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
In short, use this:
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
HTML
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body> </html>
If got a very basic layout, with a header, content container and a footer.
What i need done, is to make my content container size up, so that the whole layout will fit on the screen. (unless the text in the content container extends this of course).
I've tried assigning a height 100% value to my body, and from there assigning my content containers height to 100% aswell, but that results in making my content container size up to the height of the full screen.
Before that i had the height on the content container set to auto, which of course resulted in the page not being long enough, if a visitor with a bigger screen size than the layout, viewed the page.
Here is a part of my code:
HTML:
<body>
<div class="background"></div>
<div class="page">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
.page {
position:relative;
height:100%;
z-index:1;
}
.content {
position:relative;
width:850px;
height: 100%;
margin: 0 auto;
background: url(images/content.png) 0 0 repeat-y;
}
I think this what you need (the footer will be always sticked to the bottom)
CSS
html, body {
margin:0;
padding:0;
height:100%;
}
.page {
min-height:100%;
position:relative;
}
.header {
background:#00ff0f;
padding:30px;
}
.content{
padding:10px;
padding-bottom:45px; /* Height+padding(top and botton) of the footer */
text-align:justify;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:15px; /* Height of the footer */
background:#00ff0f;
padding:10px 0; /*paddingtop+bottom 20*/
}
.content {
height:100%; // IE HACK
}
HTML
<div class="page">
<div class="header">Header</div>
<div class="content">
Some Content Here...
</div>
<div class="footer">Footer</div>
</div>
Tested in all major browsers.
DEMO.
What you really want is a sticky footer, no? You can style the other elements to give the illusion that the #content element is bigger than it really is.
http://ryanfait.com/sticky-footer/