homepage Welcome to WebmasterWorld Guest from 54.81.80.46
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderator: open

Site Graphics and Multimedia Design Forum

    
<div> Height
height:100%;
pageoneresults




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

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?

 

mivox




msg:858934
 4:53 am on Mar 8, 2002 (gmt 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.

tedster




msg:858935
 6:30 am on Mar 8, 2002 (gmt 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].

pageoneresults




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

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved