Setting a div to 100% screen height

AusQB

AusQB

New Member
I imagined this being as simple as setting a single <div> under <body> at height:100%. Guess not.

Through a few tutorials, I have this code in my CSS:

Code: 
body {
	background: #FFFFFF;
	height: 100%;
	text-align: center;
}

div#container {
	display: block;
	height: 100%;
	margin: 0 auto;
	min-height: 500px;
	position: absolute;
	top: 0px;
	width: 840px;
}


The problem is that I want this div to be centered.


EDIT: Sorry guys, once again I find the solution not five minutes after posting.

The changes I needed to make to the CSS are highlighted in red:

Code: 
body {
	background: #FFFFFF;
	height: 100%;
       [COLOR="Red"]position: absolute;[/COLOR]
	text-align: center;
       [COLOR="Red"]width: 100%;[/COLOR]
}

div#container {
	display: block;
	height: 100%;
	margin: 0 auto;
	min-height: 500px;  (unnecessary, obviously)
	position: absolute; [COLOR="Red"](unnecessary)[/COLOR]
	top: 0px; [COLOR="Red"](unnecessary)[/COLOR]
	width: 840px;
}



SECOND EDIT: OK, so that "fix" wasn't as successful as I thought. Now it seems everything is docked with the bottom of the screen.

I made a table with three rows, put some content in middle row, and the top row extends to the bottom leaving enough space for the content.
 
Last edited:
conor

conor

New Member
Why do you have the body set to position:absolute; ? That seems unnecessary. Also the body doesn't need a background color if it's just white! :L And why is the body width set to 100% that should be unnecessary as it is set as so by default.

As for the other problem could you post a link or the code?
 
D

darksoul32

New Member
<div align='center'> Your css is kinda wierd..

Code: 
body {
	text-align: center;
}

div#container {
	display: block;
	height: 100%;
	margin: 0 auto;
	width: 840px;
}

I cleaned it up a tiny bit there may still be a bug or two but it should be better dont forget to edit the div tag to include align='center'
 
conor

conor

New Member
I don't recommend using HTML such as align="center", what's the point when you can have all your style in one place instead of working between two documents?
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Fully agree with Conor, you could use align="center" but why? you are using css keep it all in one location.

Now to fix the issue (if I am understanding it correctly)...

CSS
HTML: 
body, html {
   background:#ddd;
   margin:0;
   padding:0;
}
div#fullwin {
   border:solid 1px #ccc;
   background:#0088CC;
   width:500px;
   height:100%;
   position:absolute;
   top:0;
   bottom:0;
   left:50%
   margin-left:-250px;
}

HTML
HTML: 
<body>
<div id="fullwin">Fill Browser Window</div>
</body>

Like Conor stated, there is no need to set the body to white because this is default. Setting the body width, height to 100% will give you permanent scrollbars (dont want that).

To set the div to fill the height of the browser window...

You DID need to the {position:absolute;} AND the {top:0;},
the one you missed was {bottom:0;}.
When using absolute positioning you are defining well absolutes, lol. So {top:0;} will lock the top edge of the div to the top of the browser window. Now you just need to lock the bottom edge to the bottom of the browser window, hence {bottom:0;}. Funny thing is you almost had this one from the start.

To center the div so it is always in the middle of the browser window....

You can't use {margin:0 auto;} because the absolute position will override it (just the "auto" part).
The solution is to set {left:50%}. By setting "left" to 50 percent, you are saying the left edge of the div will always be in the dead center of the browser window.

How do you center the middle of the div in the middle of the browser window not the left edge of the div?

Right. That's when you add the negative left margin {margin-left:-250px}. This takes away 250 pixels from the left side of the div. Hence putting the middle of the div, dead center every time.

Where did I get the 250px?
Whatever width you set the main div to be, divide it in half and that is the value for you negative left margin.

Good luck, let me know if get stuck.
 
You must log in or register to reply here.
Top