Forum Moderators: not2easy

Message Too Old, No Replies

Content height problem

Content height problem

         

stien

6:29 pm on Mar 9, 2008 (gmt 0)

10+ Year Member



Hi there,

I am working on this site, but I can't get it to work the way I want.
The content area should have a height to the end of the page, but it doesn't work with height: 100%. If you see the site, you know what i mean: <>.

The css is validated so that ain't the problem, can anyone help me out?
Thanks

[edited by: SuzyUK at 11:55 am (utc) on Mar. 11, 2008]
[edit reason] Please No URI's [/edit]

MarkFilipak

3:16 am on Mar 10, 2008 (gmt 0)

10+ Year Member



If you use absolute positioning (i.e., {position:absolute}), then you should be able to set an explicit height. If you are using table cells (probably this is the case, eh?), then the cell you are using for content should expand to the end of the content automatically.

I have to ask this question: What is the "end of the page"? A page normally ends where you tell it to end unless you're using table cells.

Sorry, I'm not going to click your link.

stien

11:08 am on Mar 11, 2008 (gmt 0)

10+ Year Member



Thanks for your reply. This is the problem:

----------- header part
¦ ¦
¦ ¦ content part
¦ ¦
¦ ¦
----------- footer

The footer should be at the bottom of the screen (bottom:0, position:absolute I have that), but now the content area doens't fill up to the footer, it just stays the height it needs.

The problem is in this part:


/* Fills up the entire content area, but if content is to big the footer wont go down with the content */
#container {
position: relative;
height: 100%;
}


/* This doent's fill up the content area but if the content exceeds the site the footer DOES go down with it, and then it looks okay.*/
#container {
position: relative;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
}
html>body #container {
height: auto;
}