homepage Welcome to WebmasterWorld Guest from 54.196.62.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
trying to make a DIV 100% height
BabyJai




msg:4428406
 3:09 am on Mar 13, 2012 (gmt 0)


html, body {
height: 100%;
font-family: Tahoma, Arial;
font-size: 11px;
font-style: normal;
color: Silver;
}

#content {
width: 960px;
-moz-border-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background: #2e2e2e;
margin-left: auto;
margin-right: auto;
position: relative;
top: 60px;
padding: 5px;
-moz-box-shadow: 5px 5px 5px #2e2e2e;
-webkit-box-shadow: 5px 5px 5px #2e2e2e;
box-shadow: 5px 5px 5px #2e2e2e;
height: 100%;
}

 

alt131




msg:4430579
 3:47 pm on Mar 18, 2012 (gmt 0)

Hi BabyJai and welcome to WebmasterWorld,

Can you be a bit more specific about the issue? You see, the total height of the div will be height + padding, and it has been positioned top:60px so the total height of the div is more than 100% and it is drawn lower down the page so that it exceeds the 100% height for body. You can see this more clearly if you set a different background-color for the html and body.

Dhakadice




msg:4440848
 1:25 pm on Apr 14, 2012 (gmt 0)

I'm having the same problem. =/

Check out these two pages for example:

<HTML style="margin:0; padding:0;">
<BODY text="#000000" link="#E00000" vlink="#E00000" alink="#FF8080" style="margin: 0; padding: 0; height: 100%;">
<TABLE height="100%" width="100%" style="background-image:url('logoblank.gif');
background-repeat:no-repeat; background-position:center center;background-size:contain;"><TR><TD align=center valign=center>
<DIV style="height: 480px; width: 60%;border: 3px solid #FF0000; overflow: auto; padding: 0; margin: 0;">
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>

Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
</DIV>
</TD></TR></TABLE>
</BODY>
</HTML>


Now try to change the "480px" to as little as "1%".

<HTML style="margin:0; padding:0;">
<BODY text="#000000" link="#E00000" vlink="#E00000" alink="#FF8080" style="margin: 0; padding: 0; height: 100%;">
<TABLE height="100%" width="100%" style="background-image:url('logoblank.gif');
background-repeat:no-repeat; background-position:center center;background-size:contain;"><TR><TD align=center valign=center>
<DIV style="height: 20%; width: 60%;border: 3px solid #FF0000; overflow: auto; padding: 0; margin: 0;">
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>

Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
Bananahammock<BR>
</DIV>
</TD></TR></TABLE>
</BODY>
</HTML>


In my browser, example 1 works fine, but that's because the height is in pixels.
In example 2, where I've used percent instead, the page seems to be bigger than the windows (causing a scrollbar to appear and the background image to be partly off-screen).

It seems that once you start using percent for height, the page becomes taller.

Setting padding and margin to 0 in both the DIV, the TABLE, plus BODY and even HTML, seems to do nothing. =/

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved