CSS question ?
Moderator: General Moderators
CSS question ?
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 ?
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 ?
- Peter Anselmo
- Forum Commoner
- Posts: 58
- Joined: Wed Feb 27, 2008 7:22 pm
Re: CSS question ?
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:
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.
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%;
}
Re: CSS question ?
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
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 ?
Thanks guys.
I used this :
but this code doesn't work on IE6.
Do you have a suggestion ?
I used this :
Code: Select all
html
{
height: 100%;
}
body
{
min-height: 100%;
height: 100%;
}
div
{
height: 100%;
min-height: 100%;
}Do you have a suggestion ?
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Re: CSS question ?
Wrong wrong wrong wrong...
Peter almost had it but the last thing you want for the maximum height is to use height!
...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.
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>
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 ?
Thanks my friend
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Re: CSS question ?
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 ?
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
http://www.dustindiaz.com/min-height-fast-hack/
http://www.greywyvern.com/code/min-height-hack.html
Re: CSS question ?
Thanks guys.
Well I used CSS hack by learning this site
Well I used CSS hack by learning this site