clbembry Posted September 26, 2007 Share Posted September 26, 2007 I want to have it so my content reaches the bottom of the screen, so I used height: 100%, but it doesn't stretch it that far. Can anyone help?Heres a link to the test site: freewebs/bembry.com Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted September 27, 2007 Share Posted September 27, 2007 Erm that link doesn't work.But if you want a <div> to reach 100%, you can try: <div style="height:100%"> Or a table: <table style="height:100%"> Link to comment Share on other sites More sharing options...
clbembry Posted September 27, 2007 Author Share Posted September 27, 2007 Ok I fixed the link. What I want is for the height to be 100%, but I found out you can't do that unless the div it is inside has a given height. So how whould I set it so the height is 100% of the screen height? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 27, 2007 Share Posted September 27, 2007 There's a lot of discussion about that already online.http://www.google.com/search?hl=en&cli...amp;btnG=Search Link to comment Share on other sites More sharing options...
clbembry Posted September 27, 2007 Author Share Posted September 27, 2007 Yeah, but I found out it only works if the div inside of it has a given height. I want it to reach the bottom of the screen no matter what the resolution. Well, actually I want the min-height to be 100%. Link to comment Share on other sites More sharing options...
S@m Posted September 27, 2007 Share Posted September 27, 2007 http://www.sitepoint.com/forums/showpost.p...amp;postcount=8 Link to comment Share on other sites More sharing options...
aalbetski Posted September 27, 2007 Share Posted September 27, 2007 Your div height of 100% needs to be inherited from its parents height. Otherwise what is it 100% of?I added the position:absolute to your style.css for body and it seemed to work. Try that. body {position:absolute;height: 100%;padding: 0px;margin: 0px;font-family: tahoma;font-size: 12px;line-height: 150%;background-image: url(images/bembry-bg.jpg);background-repeat: repeat-x;background-color: #7a7a7a;color: white;} For others who may be interested:A popular trick is to set the body height to 100% so that in turn will be inherited by the child div. Try this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><body style="position:absolute;height:100%;width:100%;margin:0;padding:0"><div style="background-color:lightyellow;height:100%"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede sapien, interdum et, vulputate sed, venenatis sed, erat. Fusce at enim id tellus cursus interdum. Phasellus ornare malesuada lorem. Morbi consectetuer mollis sem. Maecenas a arcu. Cras ullamcorper massa nec augue. Vestibulum in diam. Suspendisse nec nisl eget urna consectetuer egestas. Nulla eget nunc vitae pede varius vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pulvinar. Nam id tortor ut sem sodales pharetra. Integer malesuada ipsum sed pede. Pellentesque metus lacus, rhoncus ac, ultrices pharetra, lobortis sed, eros. Curabitur id ligula sed velit pharetra ullamcorper. Nunc vehicula malesuada nunc. Integer dapibus. Etiam eros arcu, elementum a, laoreet a, porttitor et, velit. Suspendisse dignissim blandit sem.</div></html> Link to comment Share on other sites More sharing options...
clbembry Posted September 28, 2007 Author Share Posted September 28, 2007 The position absolute makes it not center anymore, so that won't work. Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted September 28, 2007 Share Posted September 28, 2007 You shouldn't need absolute positioning since there is nothing else outside of the body. Also, try setting whatever you set for the body to be html so: body,html {height: 100%;padding:0px;margin:0px;font-family:Tahoma;font-size:12px;line-height:150%;background-image: url(images/bembry-bg.jpg);background-repeat:repeat-x;background-color:#7a7a7a;color:#fff} Link to comment Share on other sites More sharing options...
clbembry Posted September 28, 2007 Author Share Posted September 28, 2007 Ok problem solved I think. Thanks for the help. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.