100% css height
- Started
- Last post
- 16 Responses
- section_014
Okay, I can't get this to work for the life of me. What I'm trying to do is make the right column div 100% height, but it stops at the end of the content. So far I have:
html, body {
height: 100%;
}#container {
height: 100%;
}#right_column {
float: right;
height: 100%;
}There are other attributes to the styles, but they're not important. I can put a height in pixels and it works fine. I've found a few tutorials online and they all specify basically what I've done above. Also, I've tried using min-height in place of height in an array of different combinations, but none seem to work. The left column will always be quite longer than the right, so I need it to be 100% of the page. Thanks.
- brandelec0
height: inherit; ?
- BattleAxe0
clear floats
- Stugoo0
that works for me.... you do have content in the divs yeah?
- D_Dot0
Is it a two column layout?
- section_0140
yes, all div's have content and it is a 2 column layout.
The left column is floated left and the right column is floated right, so I don't want to clear either.
- section_0140
^^^^
It's centered with CSS.Also, I know about the faux column method, but I would prefer not to be forced into using a background image.
This seems like something that should be ridiculously easy to do.
- Also, there are always scroll bars, if that matterssection_014
- post a linkStugoo
- Jaline0
can we see the whole code?
- Stugoo0
post a link.
- estetic0
here is a js work around, simple to implement and cross browser:
- bulletfactory0
^ i've used this js solution a number of times - works very well.
- section_0140
It's still in development on a test server that's not online. I just went with the faux column method. I can't waste anymore time on it. Thanks for all the replies.
- D_Dot0
I seem to remember using a footer and a clearing div once to get content in a container to stretch 100%. may be worth revisiting...
- neverblink0
you could do the following:
Set the container's height to 100%. Inside the container create a main_column with min-height set to 100%. Inside the main_column create a right_column with: position:absolute; top: 0; right: 0; width: 30%; height: 100%;The only problem I can forsee with that, is that you will need to set any content inside the main_column to a specific width, otherwise it will go under the right column. (So if there is a paragraph inside the main_column and the right_column is 30%, set the width of the paragraph to 70%;)
- Stugoo0
unlucky mate, if you get time for a work around post it :)
- such0