6 replies [Last post]
ankit_niitian
Offline
newbie
India
Last seen: 13 years 39 weeks ago
India
Joined: 2008-12-18
Posts: 3
Points: 0

I am developing a page where I have a div which must extend to the whole width and height of the page. For that I have used this css

position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;

Now that div extends the full space in Firefox and IE7. But it is not visible in IE6. Can someone tall me a workaround to this. I would be really thankful to anyone who could help. :thumbsup:

Thanks in advance
Ankit Garg

liam.smart
Offline
Enthusiast
Dundee, Scotland
Last seen: 13 years 25 weeks ago
Dundee, Scotland
Joined: 2008-06-26
Posts: 164
Points: 0

Lol you only need 2

Lol you only need 2 coordinates :rolleyes:

position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;

Now I wonder if you need to add width:100% & height:100% to the body... I really dont know because using absolute positioning is frowned upon. Best to stay clear of it, especially if you are a CSS beginner.

Many thanks,
Liam
www.liamsmart.co.uk

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 48 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I've run into this as well.

I've run into this as well. The right: 0 really does help IE6 and below.

I had a page with many things absolutely positioned to fake frames. I took a lot of tips and help from Paul O'B but removed the extra containers and the stuff for IE5 and IE/Mac cause I don't cater to those guys.

html, body {
  height: 100%;
  overflow: hidden;
}
 
#header {
  height: 155px;
  width: 100%; /*for IE but safe for other browsers*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0; /*for IE but safe for other browsers*/
  z-index: 10;
}
#sidebar {
  position: absolute;
  width: 150px;
  top: 150px;
  left: 0;
  bottom: 34px;
  z-index: 11;
  overflow: auto;
}
 
#container {
  position: absolute;
  top: 155px;
  left: 150px;
  right: 0;
  bottom: 34px;
  z-index: 1;
  overflow: auto;
}
 
#main {
  padding: 35px 5px 5px;
}
 
#footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 34px;
  z-index: 5;
  overflow: hidden;
}
/*Ie6 stuff*/
* html {
  padding: 155px 0 34px;
}
 
* html #sidebar {
  height: 100%;
  float: left;
  top: 0;
  bottom: 0;
  margin-right: -3px; /*3 px jog IE6*/
  position: relative;
}
 
* html #container {	
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin-left: 147px; /*3 px jog IE6*/
}
 
* html #main {
  position: absolute;
  height: 100%;
}

for a page with code something like
-doctype til </head>...
<body>
  <div id="header">blah stuff</div>
  <div id="sidebar">
    <ul>
...menu stuff here...
    </ul>
  </div>
  <div id="container">
    <div id="main">
      <h1>Fake Frames</h1>
      <h2>header</h2>
      <p>texts here</p>
    </div>
  </div>
  <div id="footer">
    <p>text here</p>
  </div>
</body>
</html>

Ie6 has some issue with things but you can get around it.

This is assuming you are using a 100% height and width container for something that really needs it, like a trick.

I'm no expert, but I fake one on teh Internets

liam.smart
Offline
Enthusiast
Dundee, Scotland
Last seen: 13 years 25 weeks ago
Dundee, Scotland
Joined: 2008-06-26
Posts: 164
Points: 0

Stomme poes wrote:I've run

Stomme poes wrote:

I've run into this as well. The right: 0 really does help IE6 and below.

I never knew that! That will hep me out with the MooTools scripts I write. I always struggle getting overlay divs to fill the whole screen in IE6... so that might be the answer!

Many thanks,
Liam
www.liamsmart.co.uk

ankit_niitian
Offline
newbie
India
Last seen: 13 years 39 weeks ago
India
Joined: 2008-12-18
Posts: 3
Points: 0

Thanks for the information

Thanks for the information Smile . I forgot to make the container's height 100%. But this solves only half of my problems. The layout which i am working on has a header which 100% wide and 50px in height. The footer is 100% wide and 35px high. And the content is 100% wide and occupies the space between header and footer i.e. 100% - (50px + 35px). I know that we cannot do such calculations in CSS. So I used a javascript expression. But I know that it is not a good habit to use javascript expressions in CSS. So is there a workaround to this?? Any help would be appreciated...

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 48 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

What you'd have to do is

What you'd have to do is have inner containers inside your 100% height container to have top and bottom padding equal to the heights of the header and footer. Those two are not children of the container (well, the header could be if you want) but directly of the body.
pseudocode:

or

or

What happens is the container may be taking up 100% height of the screen, but the header and footer are positioned absolutely to the top and bottom of the (usually) body. This means they have the (unwanted) side effect of being able to cover the content-- unless some inner elements make room for them.

<--min-height: 100%;
<--has top and bottom padding at least equal to the heights of header and footer

Quote:

position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;

While my fake frames page does that, I would not do that here if you only need a 100% height page with fixed header and footer. Instead, let the #container be normal-- easier to work with in IE anyway. It'll just be 100% wide like normal and 100% high IF the html and body elements were set to height: 100% and the #container to min-height: 100% (* html #container {height: 100%} for IE6 of course).

That way you've only got two weirdos in the code.

IE7 and Opera will still have issues with the header and footer when you're playing with zoom (the browser feature I mean, not the proprietary IE zoom function).
IE6 may sometimes also still not bring the footer or header all the way across-- I see this sometimes in a page I've made which has a fixed (position: fixed) footer on a page and some CSS javajunk for IE6 (who knows what pos: abso is but not pos: fixed which the "designer" demanded).

I'm no expert, but I fake one on teh Internets

ankit_niitian
Offline
newbie
India
Last seen: 13 years 39 weeks ago
India
Joined: 2008-12-18
Posts: 3
Points: 0

Thanks for the solution dude

Thanks for the solution dude Laughing out loud . I have to give the page the look of a tabbed page so I also have to a border on different tabs with different colors. But no problems, I'll manage it. Thanks again :thumbsup: