CSS Help
- Started
- Last post
- 20 Responses
- Bullitt
Any help be appreciated here.
Basically got a DIV which I want to stretch the height of the page. It contains a couple of paragraphs and a headers but obviously stops short with the text. Can't get it working with 100% height though. Heres the div's styles :
.contentlft {width:200px; height:100%; padding:0px 17px 0px 30px; text-align:left; border-right:1px dotted #f67514; margin-top:25px; float:left;}
cheers
- jamble0
There's tons of reading on this, http://www.google.co.uk/search?h…
You might want to try the
html {height: 100%;}
method, then put the height of 100% on your div but I've never found it that reliable.
- Bullitt0
nope... cheers
- jamble0
Might be worth looking at a javascript fix.
- neverblink0
You are floating your div, which takes it out of 'normal' flow. And thus it has no parent object to set it's 100% to.
- D_Dot0
give your container wrapper a min-height:100%
- voiceof0
Try something like http://www.leonardopicado.com/bl…
- Bullitt0
thanks folks, seems to be working, problem though I now got is I'm loosing the scroll bar for some reason.
- OhYeah0
Does your content go all the way down?
- Stugoo0
got a working example?
If you set the heignt of body to 100% it should work.
Percentages require its parent element to have a percentage too.in regards to your scroll bar do.
overflow:scroll;
overflow-y:scroll; (vertical only)
overflow-x:scroll; (horizontal only)
- Bullitt0
No I'm loosing the content now, because the scroll bars not visible.
suppose it be easier if I just share the linkhttp://consultsearch.andlight.co…
(I didn't design the header, just been working on the content area below :) )
- jamble0
The scrollbar is appearing for me on Vista/Firefox3
- R-aI0
- Anders0
Try using a footer div and play around with that;
http://www.alistapart.com/d/foot…
- Stugoo0
those images look like you are using a div that is 100% height then knocked down by that header div. so in effect the div is 10% of the page plus the heght of the top item.
now,
if you try to absolutley posiition the header.
position:absolute; top:0: left:0;then put your content in another div inside the 100% div.
give that child div a margin-top the same height as the header div...it should work out, in theory.
:)
- trooperbill0
use CSS table properties that should do it
- janne760
also adding height:100% to the body css definition can make a big difference as well!
- janne760
i mean:
body { height:100% }
setting the div to display:block may help as well
- janne760
did it work out?