SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,059
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.
    Code CSS:
    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)	
    }
    Code HTML4Strict:
    <!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

  2. #2
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm pretty sure this is where your problem lies:

    Code CSS:
    #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.

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,059
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Kokos. Thank you so much. Stupid that I didn't see that. 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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •