Jump to content

page height 100%


Recommended Posts

I want my page to be 100% height. Basically no matter how much content there is on the page I want it to always reach the bottom of the page.In my css file I got height: 100%, that works with IE but I don't think it works with the other browsers. Is there a way to this could work with all browsers?

Link to post
Share on other sites

this is from one of the sites I am designing. you may have ot play with the percentages to get it to do exactly what you want.

	html, body	{		margin: 0px;		height: 100%;		background: #000;		color: #b8b8b8;		font-family: verdana, sans-serif;		font-size: 7pt;	}	.wrapper	{		height: 100%;		-height: 100%;		width: 439px;		margin: auto;		border-left: 3px solid #313131;		border-right: 3px solid #313131;	}	.menu	{		float: left;		width: 120px;		height: 78.4%;	/*FF*/		-height: 78.6%;	/*IE*/		border-right: 3px solid #313131;		padding: 5px;		padding-top: 0px;		margin: 0px;	}	.menu a	{		display: block;		color: #BE6B0F;	}	.menu a:hover	{		color: #EE7C1D;	}	.banner	{		border-bottom: 3px solid #313131;		border-top: 3px solid #313131;		padding: 0px;		margin: 0px;	}	.content	{		float: left;		width: 296px;		padding: 5px;		padding-top: 0px;	}	

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>	<title>=CAFL= Bravery Valor Honor!</title>	<link rel="stylesheet" type="text/css" href="cafl.css"/></head><body>	<div class="wrapper">		<img src="images/caflbanner.gif" alt="" class="banner"/><br/>		<div class="menu">			<!-- #include file="menu.inc" -->		</div>		<div class="content">			<div style="font-size:8pt;font-weight:bold;text-align:center;padding-top:5px">				Welcome to =CAFL=!			</div><br/>content		</div>	</div></body></html>

Link to post
Share on other sites
what is this for: "-height: 100%;"

That line is read only by IE and ignored by all other browsers. This lets me set IE specific attributes. The '-' is one of serveral none IE CSS hacks.so the value above that line is what all browsers read then IE get s new value on the next line since IE is the one always out of whack.
Link to post
Share on other sites
That line is read only by IE and ignored by all other browsers. This lets me set IE specific attributes. The '-' is one of serveral none IE CSS hacks.so the value above that line is what all browsers read then IE get s new value on the next line since IE is the one always out of whack.

But... the value (100%) is the same for both height and -height. Why do you need it then, if not to pass another value to IE?
Link to post
Share on other sites
But... the value (100%) is the same for both height and -height. Why do you need it then, if not to pass another value to IE?

oh...hehe....I just start out my stylesheets like that...I did play with the values and found in that class they didn't need to be different....in that case that line can be removed. I used that method several times in other classes.Thanks for pointing that out.
Link to post
Share on other sites
I read an article on Project VII on how to do this, with little or no hacks. If you want a really good and reliable code, check out their site. http://www.projectseven.com/

Thanks for the link Aphotic. This site is cool! :)
Link to post
Share on other sites
No offense intended in anyway, but this is an example of the result of too many articles about how to use hacks, instead of truly cross-browser css.

???? I used one hack!?! :) Can you show me how I could have done it differently with 'cross-browser-css'???I know no other way :)
Link to post
Share on other sites

The point is you used a hack that didn't even have effect.Like I said, no offense intended. When I first learned Javascript, I learned how to detect the browser and then use separate code for each browser. I used that for years, until I realized that in the case of modern browsers that support javascript, I could usually use techniques that worked equally well in all browsers, instead of writing separate code for each.I have come across many sites that still use the old ways and for no good reason - and half the time they forget to mantain one of the sets of code, so it doesn't work right in all browsers anyway! And the hardly ever define the script tags according to w3c standardsSince I've been looking at this forum, I've noticed many many people do hacks first. It leads to messy code (sometimes not so messy...) that often has no effect.I've seen lots of people having problems getting layouts to work in both browsers, and after looking at their code, was amazed how much code and how many hacks they used to achieve simple layouts.My point was that one of the places the hack was used had no effect... Just making an observation.BTW... I'm not saying never to use hacks...

Link to post
Share on other sites

no offense was taken. It was an oversight that as you mentioned had no effect.I played with the differing values for about 30 and when I realized that in that case 100% worked the same for both I forgot to delete the hack :)I agree with you 100% in hte JS thing. It is better to detect objects or functionality then to rely on browser detection.But in the end sometime hacks and unique code is necessary thanks to lovely gift for MS called IE.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...