|
|
|
|
Thread title: 100% height |
|
|
|
|
|
Thread tools
Search this thread
Display Modes
|
|
03-31-2007, 03:18 AM
|
#1
|
Status: Senior Member
Join date: Mar 2005
Location: Singapore
Expertise: Web Design, XHTML/CSS
Software: Photoshop, Illustrator
Posts: 861
|
100% height
I have a footer and a header and a two column body using css.
The width is fixed at 700px. But how do I set the height to 100%, making the footer sitting right at the bottom of the browser and the body stretching 100% from top to bottom although its filled with minimum text?
Padding and Margin set to 0.
|
|
03-31-2007, 03:37 AM
|
#2
|
Status: Member
Join date: Feb 2006
Location: Ponca City, OK
Expertise: xHTML/CSS/PHP/Computer Tech
Software: Photoshop, Notepad++, Winamp
Posts: 332
|
Code:
*, html, body {
height: 100%;
min-height: 100%;
}
In your css
And for your container that holds the content between the header and the footer
Code:
#containter {
height: 100%;
min-height: 100%;
}
|
|
03-31-2007, 03:41 AM
|
#3
|
Status: Senior Member
Join date: Mar 2005
Location: Singapore
Expertise: Web Design, XHTML/CSS
Software: Photoshop, Illustrator
Posts: 861
|
Great, I'll try it out soon.
|
|
03-31-2007, 03:45 AM
|
#4
|
Status: Member
Join date: Feb 2006
Location: Ponca City, OK
Expertise: xHTML/CSS/PHP/Computer Tech
Software: Photoshop, Notepad++, Winamp
Posts: 332
|
That might not work, its about the right code but its not working for me. Ill fix it up and repost.
|
|
03-31-2007, 05:05 AM
|
#5
|
Status: Member
Join date: May 2006
Location:
Expertise:
Software:
Posts: 197
|
Remember, 100% means 100% of the viewport, not the page size. In otherwords, the number of pixels in height the browser has when it opens the page. If your content goes longer and causes scroll bars, your "footer" will be stuck in the middle of the content somewhere assuming you're using absolute positioning. Relative positioning will give you quirky results.
I came across this some time ago, it's 100% CSS and it puts your footer at the bottom of all the content, regardless of the browser size etc. It works well.
http://www.themaninblue.com/experiment/footerStickAlt/
The difference between this and just simply putting a footer at the bottom of the page, is that if your content does not fill up the viewport, the footer will still be at the very bottom of the browser instead of just below the end of the content. Hope that makes sense.
|
|
04-01-2007, 08:42 PM
|
#6
|
Status: Junior Member
Join date: Mar 2007
Location: Planet Earth
Expertise:
Software:
Posts: 50
|
CSS is gay, and 100% doesnt work.. If you want to do 100% height, you'll need javascript. I've tried it many times myself
|
|
04-01-2007, 09:10 PM
|
#7
|
Status: Senior Member
Join date: Jul 2004
Location: Vegas
Expertise:
Software:
Posts: 929
|
Originally Posted by Hoorai
CSS is gay, and 100% doesnt work.. If you want to do 100% height, you'll need javascript. I've tried it many times myself
|
...whats wrong with being "gay"?
gl on the code.
|
|
04-01-2007, 09:11 PM
|
#8
|
Status: Member
Join date: Dec 2005
Location: Canada
Expertise:
Software:
Posts: 194
|
Originally Posted by Hoorai
CSS is gay, and 100% doesnt work.. If you want to do 100% height, you'll need javascript. I've tried it many times myself
|
So what you're saying is that CSS is attracted to other programming languages of the same gender. Ahaha I see what you mean.
|
|
04-01-2007, 09:37 PM
|
#9
|
Status: Member
Join date: Jan 2007
Location:
Expertise:
Software:
Posts: 311
|
Originally Posted by Hoorai
CSS is gay, and 100% doesnt work.. If you want to do 100% height, you'll need javascript. I've tried it many times myself
|
Actually it is very possible to do it solely with CSS and I have personally done it many times.
With that said, in order to achieve the result, you're going to need to use a combination of 'height' and 'max-height' (or 'min-height' depending on your desired effect) on various elements.
You could opt to have the height at a minimum of 100%, scrolling when it gets greater than that or you could alternatively have it fixed to always be a height of 100% (header right at the top and footer at the bottom) with only the body being scrollable should it exceed it's allocated height prior to being cut-off (or scrollable).
|
|
04-02-2007, 02:00 PM
|
#10
|
Status: Member
Join date: Oct 2005
Location: Calgary, Alberta, Canada
Expertise:
Software:
Posts: 278
|
well thats all very well and interesting (and Amross your right), but....CSS is gay?!? when did that happen?!?
...congrats in coming out?..i guess.
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|