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

Get Started
1

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

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

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.


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



#footer {
      bottom: 1px;
      position: absolute;
      text-align: center;
}
#footer div {
      height: 525px;
      margin: 0 auto;
      overflow: hidden;
      width: 948px;
}
4

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.


<!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

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 :stuck_out_tongue:

6

Where does he mention that it’s for a footer? :slight_smile:

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

7

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?