Menu
Im trying to make my footer to be at the end of the page, so I'm using position:absolute and bottom:0 to do this. The problem is the background color will not be extended to fit the screen, so I tried using width:100% but now it has extra pixels
this is the example i created http://jsfiddle.net/SRuyG/2/ (sorry it's a bit messy, i'm just starting to learn css)
I also tried the sticky footer from some tutorials i found but it's not working either. So how exactly can I set the footer to the bottom of the page and the background fits the screen size?
Thank you
CSS:
html, body {
margin: 0;
padding: 0;
}
body {
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}
.contentWrapper{
min-height: 100%;
margin-bottom: -142px;
}
.contentWrapper:after {
content: "";
display: block;
height: 142px;
}
nav {
background: #222;
color: #fff;
list-style: none;
font-size: 1.2em;
padding: 10px 20px;
box-shadow: 0px 0px 4px 4px #888888;
}
#navBar li{
display:inline;
}
#navBar li a{
color: #fff;
text-decoration: none;
padding: 25px;
}
#navBar li a:hover{
background:#fff;
color: #222;
text-decoration: none;
padding: 25px;
}
footer {
position:absolute;
background: #222;
color: #fff;
list-style: none;
font-size: 1.2em;
padding: 10px 20px;
bottom:0;
width: 100%;
}
HTML:
<body>
<nav>
<ul id='navBar'>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</nav>
<div id="contentWrapper">
<section id="intro">
<header>
<h2>Intro</h2>
</header>
<p>Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
</p>
</section>
</div>
<footer>
<section id="about">
<header>
<h3>Footer</h3>
</header>
<p>some text here. </p>
</section>
</footer>
</body>
854
Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
Try using box-sizing: border-box; to constrain the border and padding areas to the width of the <footer> - as the padding: 10px 20px rule is what's causing the scroll bar to appear.
footer {
position:absolute;
background: #222;
color: #fff;
list-style: none;
font-size: 1.2em;
padding: 10px 20px;
bottom:0;
width: 100%;
box-sizing: border-box;
}
http://jsfiddle.net/SRuyG/4/
114
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
