I've got CSS issue with footer on my webpage. I've used this article, but I've got empty space between footer and bottom of the page. Since there is no content in the body of my page the empty space is still here and there is an additional scrollbar when it's not needed. I really don't know why it's there. I've cleaned the CSS so there isn't any irrelevant code.
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>My Page</title>
</head>
<body>
<div id="container">
<div id="header">
<p>
Header Content
</p>
<hr>
</div>
<div id="body">
Body Content
</div>
<div id="footer"><p id="copy">Copyright 2013</p></div>
</div>
</body>
And CSS:
html, body {height: 100%}
body {
margin: 0px;
padding: 0px;
}
#copy {vertical-align: bottom;text-align:center;font-family:Century Schoolbook;color:#8B0B04;font-size:14px;}
#footer {bottom: 0;width:100%;position: absolute;height: 60px}
#container {min-height: 100%;position: relative}
#body {padding-bottom: 60px}
My browser is Firefox, but in Chrome this doesn't work too. I will be so happy if you will give me any feedback and help. Thanks!
EDIT: I've posted something wrong imho. I will post the whole page next day. Again thanks for feedback.
Use overflow:hidden for container for removing the scroller
#container {
min-height: 100%;
position: relative;
overflow: hidden;
}
and padding-bottom for body div
#body{
padding-bottom:20px;
}
Demo and here is Demo with content
Maybe try this css instead of what you have up there:
html, body {
height: 100%
}
body {
margin: 0px;
padding: 0px;
}
#copy {
vertical-align: bottom;
text-align:center;
font-family:Century Schoolbook;
color:#8B0B04;
font-size:14px;
}
#footer {
bottom: 0;
width:100%;
position: absolute;
}
#container {
min-height: 100%;
position: relative
}
Related
I want to have a div in footer from side by side, but with this code it is leaving a white border.
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#bottomnav {
background-color: #333;
opacity: 1;
height: 100px;
left: 0;
right: 0;
bottom: 0;
overflow: visible;
}
</style>
</head>
<body>
<footer>
<div id="bottomnav">
Hello
</div>
</footer>
</body>
</html>
From your description, I can't tell quite what problem you have, but I'm guessing it's the margin on the body element. Try this:
body {
margin: 0;
}
You need to reset body margins to zero.
body {
margin: 0;
}
you need to clear the body margins
* {margin:0; padding:0;}
but universal selectors can affect you page load times
Have a look at css resets and what the various fixes can do for your browser
http://www.cssreset.com/
also this may explain a bunch of things for you http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
I started to design my portfolio and I have this problem I set pattern for a background but I want to have and 1 more color and 1 sliced image over this pattern. I started to code it and everything was fine except that my navigation menu and other things were under this color and picture which i added. This is the HTML code and CSS. Please help?!?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Wrapping up HTML5</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="top-wrap">
<div id="cornerfill"><div class="fillmask"></div></div>
<div id="fillright"><div class="rightfill"></div></div>
</div>
<div id="wrapper">
<header><h1>Using a HTML5 wrapper</h1></header>
<section>
<article>
<hgroup>
<h1>This is actually legal</h1>
<h2>Just wrap everything in a div, just like before</h2>
</hgroup>
<p>But it's probably better to simply use the body tag.</p>
</article>
</section>
<footer><p>Love from Kebman</p></footer>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
html
{
width:100%;
height:100%;
}
body {
width: 100%;
height: 100%;
min-width:960px;
min-height:600px;
margin: 0;
padding: 0;
background: #FFF url(../img/bg.png) fixed;
}
#cornerfill
{
position:fixed;
top:0;
left:0;
width:50%;
height:100%
}
#cornerfill .fillmask
{
width: 100%;
height: 100%;
background-color:#070707;}
#fillright {
position:fixed;
top: 0;
right: 0;
width:50%;
height: 100%;
}
#fillright .rightfill
{
margin-left:-20px;
width: 600px;
height: 100%;
background:url(../img/bgup.png) left bottom no-repeat;
}
#wrapper{
width: 960px;
margin: 0 auto;
}
header
{ width:auto;
height:auto;
background:#FFF;}
#top-wrap
{
width:100%
height:40%
}
Try applying z-index to control the layering of elements on the page.
I'm trying to make a really simple webpage. It should be a 1000px wide green, centered rectangle stretching all the way from the top to the bottom of the webpage on a red background, no matter how much content there is.
I can't get this working though. If I use min-height (like below), the green area doesn't stretch all the way to the bottom of the page if there's not enough content. If I replace it by height, the content overflows the green area if there's much content.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="container">
content here.
</div>
</body>
</html>
Here's the CSS:
html {
height: 100%;
}
body {
background-color: #F00;
margin: 0;
min-height: 100%;
}
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
height: 100%;
}
I know this is feasible with more divs, but it really should work without changing the HTML. How can I solve this?
By the way, I'm on Safari. I don't care about compatibility with browsers not respecting standards.
Here is a working sample:
<!doctype html>
<html>
<head>
<title>Container sample</title>
<style>
html, body
{
margin: 0;
padding: 0;
height: 100%;
background: red;
}
#container
{
background: green;
width: 1000px;
min-height: 100%;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div id="container">
Container sample
</div>
</body>
</html>
For more information take a look at my answer to a similar question.
you can use property position absolute for your requirement. It may help you
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
left:50%;
margin-left:-500px;
}
Give your #container a position:absolute; with top and bottom set to 0.
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
}
http://jsfiddle.net/jasongennaro/4ZLcD/
I have a pretty run-of-the-mill website: header, body and footer. The header and body are green, but the footer is black. The site looks fine when there's a large amount of content, but on pages with only a paragraph or two, the footer doesn't extend to the bottom of the page (especially on larger monitors), and the green background of the site extends beyond the footer - not the effect I'm going for.
Is there a way to set the footer height to extend all the way to the bottom of the page, regardless of content and monitor size? Ideally this would be done without using Javascript.
You are looking for a sticky footer. I have had good experiences with Ryan Fait's solution, but this new sticky footer manages to work without the extra tags.
From the exposition on the sticky footer:
In the head:
<style type="text/css">
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;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
And for your body:
<div id="wrap">
<div id="main">
<!-- Your content here -->
</div>
</div>
<div id="footer">
</div>
Edit
From your explanation, it seems that I misunderstood you. You are looking for an auto-expanding section, rather than a sticky footer. If this is the case, you can get that effect by using display: table (though it doesn't work in as many browsers as the sticky footers do - it fails in IE 7, for example).
I have created an example here.
The code, for reference:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
min-height: 100%;
padding: 0;
}
.Wrapper {
display: table;
min-height: 100%;
min-width: 100%;
height: 100%;
width: 100%;
}
.Contents {
background-color: #CCC;
display: table-row;
min-height: 100px;
}
.Footer {
background-color: #0C0;
display: table-row;
min-height: 100%;
}
.data {
display: table-cell;
}
.Wrapper .data {
height: 100px;
}
.Footer .data {
height: 100%;
min-height: 40px;
background-color: #0C0;
}
</style>
</head>
<body>
<div class="Wrapper">
<div class="Contents">
<p class="data"> </p>
</div>
<div class="Footer">
<p class="data"> </p>
</div>
</div>
</body>
</html>
You could add a dummy div and style that with CSS to match the height of your navigation pane, with your footer below this div, it'll always style the way you want.
It would be better if you did use some JavaScript, it wouldn't be complicated at all.
If I'm understanding your question correctly, you'll need to clear the footer, by applying clear:both; in css selector for the footer.
would suggest going for the js alternative..seems much easier..please tell us if there's any specific reason to avoid js based styling in your case...the only other alternative i could think of is hardcoding the body content div dimensions and setting the footer position fixed..not ideal
I want is this:
the blue area resizes with when the browser window resizes.
The header is visible.
the blue area starts where the header finishes (not behind the header or above).
the blue area ends before the footer.
between the blue area and the footer exist 5 yellow pixels.
Is this possible only with CSS and HTML ( without any javascript ) ?
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<style>
*{
margin:0px;
padding:0px;
}
header, nav, article, footer, address {
display: block;
}
header{
position:relative; height: 50px; background-color:#2b2b2b;
}
footer{
height: 50px;
width:100%;
bottom: 0px;
position: fixed;
background: red;
}
#explorer{
position:relative; bottom:55px;
}
#sections{
width: 100%; height: 100%; bottom: 55px; position:fixed; background: blue;
}
</style>
</head>
<body style="background-color:yellow">
<header >
<h1>Test</h1>
</header>
<div id="explorer" >
<div id="sections" >
</div>
</div>
<footer>
/* Footer Content */
</footer>
</body>
</html>
I think Kit's code needs just one adjustment & that is we have to remove the height:100% from the sections div & it will work just fine. Also while testing the following code, i noticed that if we reduce the height beyond a limit the footer actually comes above the header. Although, practically the height would never be so less, but still you might want to add z-index:5000 to header tag
Like this?
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
html, body, h1 {
margin:0px;
padding:0px;
}
header, nav, article, section, footer, address {
display: block;
}
header {
position:relative;
height: 50px;
width: 100%;
background-color:#2b2b2b;
}
footer{
height: 50px;
width:100%;
bottom: 0px;
position: fixed;
background: red;
border-top: 5px solid yellow;
}
#explorer{
position:relative; bottom:55px;
}
#sections{
width: 100%;
height: 100%;
bottom: 55px;
position:fixed;
top: 50px;
background: rgba(0,0,256,.5);
}
</style>
</head>
<body>
<header >
<h1>Test</h1>
</header>
<div id="explorer" >
<div id="sections" >
</div>
</div>
<footer>
/* Footer Content */
</footer>
</body>