Welcome to WebmasterWorld Guest from 50.19.0.90

Forum Moderators: not2easy

Message Too Old, No Replies

<div> Height

height:100%;

     
3:12 am on Mar 8, 2002 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12166
votes: 51


Question for you CSS gurus. I have a navigation <div> that resides at the left of my page. Inside that <div> I have another <div> that contains navigation text links.

I have a background tile image which measures 189 x 9 and is set as a background-image attribute for that navigation <div>, it tiles nicely. Problem is, I need that <div> with the background image to extend 100% of the height of the browser window. I've tried specifying height:100%; and it seems to stop at about 70% of the window height. I then set it to height:1100px; and it extends the full 1100px nicely.

Unfortunately that does not work for all pages and hence the reason why I need one that extends 100% no matter how much or how little content their is.

How do I get that <div> to be 100% of the height?

4:53 am on Mar 8, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 6, 2000
posts:3928
votes: 0


That's a great big mystery to me... never found out how to make that work.

I'd love to know if it's possible.

6:30 am on Mar 8, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


So far CSS on its own is not well enough behaved to accomplish this, as far as I know. But you can use JavaScript to capture the measure of the window's height in pixels. Store this value in a variable, and then use document.write to define the div inline and make it's height exactly that number of pixels.

I know that using js has some limitation, but it would give 90% of your visitors the exact experience you want. You could always use a <noscript> tag to write in a best guess so your page would degrade gracefully for visitors with scripting turned off.

We've wrestled with similar issues over in the Browsers forum. Here's one related thread [webmasterworld.com].

6:41 am on Mar 8, 2002 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12166
votes: 51


I think what we may end up doing is changing the left tile to a page background image and then changing the current page background image to a tile in a div that we can control the width in percentage.

Been doing some reading since I first posted and you cannot specify height in percentages for <div> elements. But, you can specify percentages for width. So, we just need to reverse our page background and we should be okay. Thanks for your responses!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members