100% Height is doing my head in

I have a weird problem with a 100% height layout, sticky footer and the scrollbar. I only would only like to have a scrollbar if there is more content than visible in the viewport. But somehow, no mater the available content, the scrollbar is there even if there is no content at all. It have to be about 15px I’m missing somewhere, but I don’t see where i’m going wrong.


html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
	margin: 0; padding: 0; 
}

ul, ol, li {
	list-style-type: none; 	
}

img,fieldset {
	border: none;
}

html, body {
	height: 100%; 
}

body {
	overflow: auto;
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 100%/130%; 
	color: #FFF;
}

/* Background Image */

.bg {
	min-width: 1024px; 
	min-height: 100%; 
	width: 100%; 
	height: 100%; 
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: -1; 
	display: none;
}


/* Top Line */

#topline {
	width: 100%; height: 10px; z-index: 4; 
}

.tlHome {
	background: url(../images/tlhome.gif) repeat-x; position: fixed; top: 0; left: 0;	
}

.tlDrinks {
	background: url(../images/tldrinks.gif) repeat-x; position: fixed; top: 0; left: 0;		
}

.tlNews {
	background: url(../images/tlnews.gif) repeat-x; position: fixed; top: 0; left: 0;		
}

.tlContact {
	background: url(../images/tlcontact.gif) repeat-x; position: fixed; top: 0; left: 0;		
}

/* Menu */

#menu {
	height: 270px; 
	position: absolute; 
	right: 0; 
	top: 190px;
	z-index: 4;
	font: 2.2em Georgia, "Times New Roman", Times, serif; 
	font-weight: bold;	
}

#menu li {
	margin-top: -5px; 
	float: right; 
	clear: right; 
	position: relative;	
}

#menu a {
	height: 50px; 
	line-height: 50px;
	padding: 0 10px;
	padding-top: -5px;
	display: inline-block; 
	color: #FFF; 
	text-decoration: none; 
	text-transform: lowercase;	
}

#menu a.home {
	 background: #8DADCE;
}

#menu a.drinks {
	 background: #84A17B;
}

#menu a.news {
	 background: #F6AA4C;
}

#menu a.contact {
	 background: #E2E17C;
}

#menu a.home:hover,
#menu a.home:active,
#menu a.home:focus,
#menu a.home.current {
	background: #124C83; 
	outline: 0;	
}

#menu a.drinks:hover,
#menu a.drinks:active,
#menu a.drinks:focus,
#menu a.drinks.current {
	background: #4F7942;	
}

#menu a.news:hover,
#menu a.news:active,
#menu a.news:focus,
#menu a.news.current {
	background: #F28500;	
}

#menu a.contact:hover,
#menu a.contact:active,
#menu a.contact:focus,
#menu a.contact.current {
	background: #DAD800;	
}

/* Body Content */

#wrapper {
	width:880px; 
	min-height: 100%; 
	margin: 10px 0 0 60px;
	position: relative;
	z-index: 4;
	font: .7em/130%;  
	color: #FFF;
}

#header {
	width:880px; 
	height: 180px; 
	position:relative;
}

#content {
	width:540px; 
	margin-right: 40px; 
	padding: 20px 0 60px; 
	float: left; 
	dispay: inline;	
	overflow: auto;	
}

#sidebar {
	width: 300px; 
	padding: 20px 0; 
	float: left;	
	overflow: hidden;
}

#content h1,
#sidebar h1 {
	padding: 0 0 15px 15px; 
	font-size: 1.2em; 
	font-weight: bold;
}

#content p,
#sidebar p {
	margin: 0 15px;	
}

#content p:first-child{
	margin-bottom: 20px;	
}

.bghome {
	background: url(../images/bghome.png)
}

.bgdrinks {
	background: url(../images/bgdrinks.png)
}

.bgnews {
	background: url(../images/bgnews.png)
}

.bgcontact {
	background: url(../images/bgcontact.png)
}

/* Footer */

#footer {
	width:880px; 
	height:60px; 
	margin:-60px 0 0 60px; 
	position:relative; 
	clear: both;
	z-index: 4;
}

#footer-left {
	width: 540px; 
	height: 30px; 
	line-height: 30px; 
	margin: 15px 40px 0 0; 
	float: left; 
	display: inline; 
	background: url(../images/content.png)	
}

#footer-right {
	width: 300px; 
	height: 30px; 
	line-height: 30px; 
	margin-top: 15px; 
	float: left; 
	background: url(../images/content.png)	
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Polis Cafe | Nafplion Greece</title>
<link rel="stylesheet" type="text/css" href="css/default.css" media="screen" />
</head>
<body>

<!-- Start Background Image -->
<img class="bg" src="images/contact.jpg" alt="Polis Cafe Background Homepage">
<!-- End Background Image -->

<div id="topline" class="tlHome"></div>

<!-- Start Menu -->
<div id="menu">
<ul>
<li><a href="#" class="home current">about</a></li>
<li><a href="#" class="home">our drinks</a></li>
<li><a href="#" class="home">events</a></li>
<li><a href="#" class="home">photo gallery</a></li>
<li><a href="#" class="home">links</a></li>
<li><a href="c#" class="home">contact us</a></li>
</ul>
</div>
<!-- End Menu -->

<!-- Start Wrapper -->
<div id="wrapper">

<!-- Start Header -->
<div id="header"></div>
<!-- End Header -->

<div id="content" class="bghome">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mauris purus, tempus sit amet luctus nec, consequat eu orci. Curabitur quis bibendum lacus. Vestibulum cursus elementum sodales. Etiam mauris risus, iaculis sit amet vulputate sed, fermentum sed mauris. Suspendisse at consequat quam.</p>
<br /><br />
<p>Curabitur mauris nunc, rutrum at mattis sit amet, porttitor quis dui. Fusce porttitor porta nisi sed eleifend. Pellentesque scelerisque viverra nunc. Nullam elementum tortor ut ligula sollicitudin eget varius neque lacinia.
</p>
</div>

<div id="sidebar" class="bghome">
<h1>Newsletter</h1>
</div>

</div>
<!-- End Wrapper -->

<!-- Start Footer -->
<div id="footer">

<div id="footer-left"></div>

<div id="footer-right"></div>

</div>
<!-- End Footer -->

<!-- Start Javascript -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/calls.js"></script>
<!-- End Javascript -->
</body>
</html>


I would be more than happy if someone see what I’m overlooking.

Thank you in advance.

Edit: This happens in all modern browsers

Hi Kokos. Thank you so much. :slight_smile: Stupid that I didn’t see that. :headbang: I was looking at it for such a long time that I simply didn’t see it. I think it’s time for me to sleep.Thank you again :tup:

I’m pretty sure this is where your problem lies:

#wrapper {
min-height: 100%;
margin: 10px 0 0 60px;
}

Your wrapper is set to a height of 100%, and then a vertical margin is added to it. As far as I know this extends the height to 100%+20px, always giving you a page that is longer than the browser height.