SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to create a Fixed height DIV with no scroll bars?

    Just curios and want to learn, how do I make a page have fixed height so that it fills the browser vertically but never gets a scroll bar? Or is there a way, lets say I take a 500px div and centered it. I want it to be in the middle but with no scroll bars.

    Is this possible?

    Iconic Creator

  2. #2
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay this is what I did, I created a 948px width, 525px height div wrapper.
    I made the position absolute and give it a bottom position value of 1px.

    It sits on the bottom of the window as close as I want it to, but I cannot get it to center.

    Any ideas?

    IC

  3. #3
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Firstly you will want to take care of the centering of your footer. You have set a width and absolute positioning, this is good. However you will need to apply margin: 0 auto; to your code, this will trigger equally distributed margins on each side of the div in question. On top of this for browser compatibility on the parent element you will need to apply text-align: center; which will apply the needed centering of the element.

    As for preventing scrolling on the div, all you need to apply on the footer is overflow: hidden; and that should do the trick.

    Code HTML4Strict:
    <div id="footer">
          <div>
          </div>
    </div>
    Code CSS:
    #footer {
          bottom: 1px;
          position: absolute;
          text-align: center;
    }
    #footer div {
          height: 525px;
          margin: 0 auto;
          overflow: hidden;
          width: 948px;
    }

  4. #4
    SitePoint Zealot FaridHadi's Avatar
    Join Date
    Nov 2008
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually margin:0 auto; is not going to help with position:absolute;.
    Instead you'll need to give the div a left:50%; and then give it a negative margin that is equal to half of the width of the div, margin-left:-474px; in this case.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    .foo {
    	position:absolute;
    	bottom:1px;
    	width:948px;
    	height:525px;
    	left:50%;
    	margin-left:-474px;
    	overflow: hidden;
    	background-color:#999999;
    }
    </style>
    
    </head>
    
    <body>
    
    <div class="foo">
    
    </div>
    
    </body>
    </html>

  5. #5
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    FaridHadi, if you actually read my post you would notice the forced absolute positioning was applied to the outside DIV, the inner DIV contains the offset margin and would not be affected by the absolute positioning as it only inherits its position from the parent. I assumed he wanted full horizontal spanning due to it being a footer, otherwise your solution would be the correct one to use.

    PS: I know this works browserwide because I have used it a fair number of times

  6. #6
    SitePoint Zealot FaridHadi's Avatar
    Join Date
    Nov 2008
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where does he mention that it's for a footer?

    Your code still won't work without setting margin:0px; on the body element and setting width:100&#37;; in #footer.

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    There will be the problem of this box actually having content in it some day. What is supposed to happen when there's more content, or less browser, than 500 px? No scrollbars will mean content is unreachable.

    Farid gave a working answer to the "how" but I wonder if there's really another goal here-- something like a background that always fills the screen, or a 100% height model with always very little content?


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
  •