CSS question ?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Mds
Forum Contributor
Posts: 110
Joined: Tue Apr 22, 2008 8:56 pm
Contact:

CSS question ?

Post by Mds »

Hi.
I have a DIV tag .
I want to fix maximum height of it with height of the browser (FF or IE)
how can I do it ?
User avatar
Peter Anselmo
Forum Commoner
Posts: 58
Joined: Wed Feb 27, 2008 7:22 pm

Re: CSS question ?

Post by Peter Anselmo »

If your content is longer than the height of the browser, then you don't need to do anything special, just enclose your content with the div tag.

Since I imagine that is not the case, you can apply the following styles to the div:

Code: Select all

 
#wrapper_div {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
 
This will work as long as you don't have to scroll down. However, if you have some pages that ARE longer than the height of the browser, this div will only go down to the place on the page that was at the bottom when the page loaded. If you're applying a background or something similar, you will need to use an additional div to enclose the longer content, and apply the same background. I did just this recently with a website here. You can view the css here. The background pattern on the left will go down to the bottom of the page, regardless of the length of the content.
User avatar
Chalks
Forum Contributor
Posts: 447
Joined: Thu Jul 12, 2007 7:55 am
Location: Indiana

Re: CSS question ?

Post by Chalks »

If I understand you correctly, you want the div to be the height of the browser and no higher, regardless of the length of content.

Set the height, then use the overflow property to deal with scrolling and whatnot.
http://www.w3schools.com/Css/pr_pos_overflow.asp
User avatar
Mds
Forum Contributor
Posts: 110
Joined: Tue Apr 22, 2008 8:56 pm
Contact:

Re: CSS question ?

Post by Mds »

Thanks guys.
I used this :

Code: Select all

html
{
      height: 100%;
}
 
body
{
      min-height: 100%;
      height: 100%;
}
 
div
{
      height: 100%;
      min-height: 100%;
}
but this code doesn't work on IE6.
Do you have a suggestion ?
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: CSS question ?

Post by JAB Creations »

Wrong wrong wrong wrong...

Peter almost had it but the last thing you want for the maximum height is to use height!

Code: Select all

<style type="text/css">
body, html {
 background-color: #fff;
 margin: 0px; /* the body element should really use padding but all browsers implemented this incorrectly */
}
#body {
 background-color: #bbb;
 bottom: 0px;
 left: 10%;
 overflow: auto; /* will make the div element scroll like an iframe */
 position: absolute;
 right: 10%;
 top: 0px;
}
</style>

Code: Select all

<body>
<div id="body"><p>body / content.</p></div>
</body>
 
...again don't set height for this. If you want to create a border for the #body or padding and such keep CSS1 rules in mind about how width and height are calculated.

Lastly keep in mind that positioning is CSS2, not CSS1. It won't work too well in older or simply crappy browsers (IE IE!).

I use this layout essentially at my website so you're welcome to visit and look at the code served per browser and under my web menu check out the IECCSS to EASILY deal with IE's issues.
User avatar
Mds
Forum Contributor
Posts: 110
Joined: Tue Apr 22, 2008 8:56 pm
Contact:

Re: CSS question ?

Post by Mds »

Thanks my friend
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: CSS question ?

Post by JAB Creations »

No problem...and if you have issues with IE6 (if you need to support it that is) my site uses an onload event to correctly re-render the div (it's <div id="body on my site) using JavaScript. Every other browser will work fine. I replaced height with bottom (and it's usually bottom and right that older browsers have trouble with).
User avatar
Chalks
Forum Contributor
Posts: 447
Joined: Thu Jul 12, 2007 7:55 am
Location: Indiana

Re: CSS question ?

Post by Chalks »

Just a quick note, IE has issues with min-height... here are two different "hacks" that might help if you want to use it in the future.
http://www.dustindiaz.com/min-height-fast-hack/
http://www.greywyvern.com/code/min-height-hack.html
User avatar
Mds
Forum Contributor
Posts: 110
Joined: Tue Apr 22, 2008 8:56 pm
Contact:

Re: CSS question ?

Post by Mds »

Thanks guys.
Well I used CSS hack by learning this site
Post Reply