2 replies [Last post]
Gravesent
Gravesent's picture
Offline
Enthusiast
Bucharest - Romania
Last seen: 7 years 25 weeks ago
Bucharest - Romania
Timezone: GMT+3
Joined: 2007-03-23
Posts: 71
Points: 32

I have to create a centered div that has a certain width and is as tall as the browser window, I have managed to do this for all browsers but there's a problem, here's my code:

/* CSS Document */

@charset "utf-8";

body {
text-align:center;
font-family:"Trebuchet MS";
font-size:12px;
color:#FFFFFF;
background-image:url(../images/main_bkg.jpg);
background-repeat:repeat-x;
background-color:#373735;
height:100%;
}

html {
height:100%;
text-align:center;
}

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr,fieldset {
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}

#main_body {
margin:auto;
width:737px;
height:100%;
background-image:url(../images/header_bkg.jpg);
background-repeat:repeat-x;
background-color:#424240;
text-align:left;
padding-left:113px;
min-height:100%;
}

I understand that to cover the full lenght of the page the div has to have hight 100%, this only works for ie if you make the body have height 100% too, for firefox I have to set html to have 100% hight as well and all works fine, for one exception, if my page is longer than the browser window viewport the div only streches as long as the initial viewport, if I scroll down the div no longer streches, what is there to do?

I corected this with a table cell that has the bg color the same as the div, but the design got very complicated, how to avoid tables?

You can view the entire site here:http://cstech.ro/inlucru/

chrisjb
Offline
newbie
UK
Last seen: 13 years 16 weeks ago
UK
Timezone: GMT+1
Joined: 2007-08-06
Posts: 4
Points: 0

Have you tried min-height:

Have you tried min-height: 100%?

That could work at a glance.

I've experienced this dillemma in the past myself.

Do you want the div to maintain a consistent 100% height, or do you want it to be at least 100%?

You may need to use 'css frames' if it is the former, in which case you would position your footer absolute, with bottom: 0.

Gravesent
Gravesent's picture
Offline
Enthusiast
Bucharest - Romania
Last seen: 7 years 25 weeks ago
Bucharest - Romania
Timezone: GMT+3
Joined: 2007-03-23
Posts: 71
Points: 32

min height won't work, eider

min height won't work, eider I'm dumb or css frames won't do the trick eider because I want the site to behave as it does now... as a wise man once said: "Tables are dead, long live tables"