bugging height

Discussion in 'CSS' started by mutsop, Nov 4, 2008.

  1. #1
    Hi

    I've been looking for this on google and have found thousands of articles how it comes that teh height 100% in FF only means till the bottom of the window screen and not the page.

    But I haven't found a decent fix.

    This is my css and html:
    #wrapper{
    	background: #000000;
    	margin: 0 auto 0 auto;
    	min-height:100%; 
    	width: 960px;
    	padding: 10px;
    	text-align: left;
    	border: 10px solid #1a1a1a;
    	overflow: !visible;
    }
    #header{
    	float: left;
    	width: 960px;
    	height: 151px;
    	margin: -10px -10px 0 -10px;
    	background-image: url(images/logo_goowik.jpg);
    }
    #container{
    	float: left;
    	margin: 10px 0 0 0;
    	width: 583px;
    	height: 100%;
    	border-right: 2px dotted #1a1a1a;
    }
    .sidebar{
    	float: left;
    	width: 345px;
    	height: 100%;
    	background: #000000;
    	margin: 0 0 0 10px;
    }
    
    #footer{
    	clear: both;
    	float: left;
    	width: 960px;
    	height: 100%;
    	margin: 10px 0 0 -10px;
    	padding: 10px 0 0 10px;
    	border-top: 10px solid #1a1a1a;
    }
    Code (markup):
    
    <body>
    
    	<div id="wrapper">
    	  <div id="header">
    	
    	  </div>
              <div id="container">
    	
    	  </div>
              <div id="sidebar">
    
    	  </div>
    	  <div id="footer">
    	
    	  </div>
            </div>
    </body>
    
    Code (markup):
    If it might be of interest, I'm using wordpress. And would like to set a border around the website.


    Regards
    Peter
     
    mutsop, Nov 4, 2008 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What do you want it 100% of the browser window? If so when specifying you also have to use in your CSS:

    html, body { height:100%; }

    Sorry if I mis-read
     
    wd_2k6, Nov 4, 2008 IP
  3. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You don't have to read thousands of articles how to solve 100% height problem.
    There are many ways to solve the problem including Css , layout(some layout doesn't have 100% height problem at all ) , js solutions .
     
    justinlorder, Nov 4, 2008 IP
  4. pendelton

    pendelton Peon

    Messages:
    61
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    pendelton, Nov 4, 2008 IP