Page 1 of 1
CSS question ?
Posted: Tue Jul 15, 2008 2:46 pm
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 ?
Re: CSS question ?
Posted: Tue Jul 15, 2008 4:21 pm
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.
Re: CSS question ?
Posted: Tue Jul 15, 2008 6:59 pm
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
Re: CSS question ?
Posted: Wed Jul 16, 2008 6:29 am
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 ?
Re: CSS question ?
Posted: Mon Jul 21, 2008 1:54 pm
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.
Re: CSS question ?
Posted: Tue Jul 22, 2008 2:30 pm
by Mds
Thanks my friend
Re: CSS question ?
Posted: Tue Jul 22, 2008 2:37 pm
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).
Re: CSS question ?
Posted: Tue Jul 22, 2008 3:01 pm
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
Re: CSS question ?
Posted: Wed Jul 23, 2008 4:58 pm
by Mds
Thanks guys.
Well I used CSS hack by learning
this site