I don't think there's a straight css solution to this. But I could be wrong.
In a web page, I have a div that I want to have a max-height of 100% -- of the available space. Basically, I want it to fill up the screen vertically, but not leave the screen out the bottom -- so no scroll bars ever appear to scroll the ENTIRE page. However, if the content in that div is more than what vertical height is available, I want scroll bars to appear only on that div (overflow: auto;).
A good example of what I'm talking about is Google Calendar: calendar.google.com
Check it out, on say, the Weekly view. A scroll bar DOES appear, but only for that div. You can resize your browser window and the div with the calendar in it will resize accordingly. You never get a normal browser scroll bar....just a scrollbar for that section.
Anyone know how to do this? Links to articles online? I've looked around and couldn't find anything....
Thanks.
In a web page, I have a div that I want to have a max-height of 100% -- of the available space. Basically, I want it to fill up the screen vertically, but not leave the screen out the bottom -- so no scroll bars ever appear to scroll the ENTIRE page. However, if the content in that div is more than what vertical height is available, I want scroll bars to appear only on that div (overflow: auto;).
A good example of what I'm talking about is Google Calendar: calendar.google.com
Check it out, on say, the Weekly view. A scroll bar DOES appear, but only for that div. You can resize your browser window and the div with the calendar in it will resize accordingly. You never get a normal browser scroll bar....just a scrollbar for that section.
Anyone know how to do this? Links to articles online? I've looked around and couldn't find anything....
Thanks.
posted by:
|
-
Re: Making a divs max height the height of the browser window
Mon, February 26, 2007 - 3:46 AMhtml { height: 100%;}
body {height: 100%;}
#mycontainer {height: Npx;}
#myscroller { max-height: Npx;}
I think that will do what you want.... But keep in minde ie <= 6 doesnt support min/max height or width properties... -
-
Re: Making a divs max height the height of the browser window
Mon, February 26, 2007 - 8:39 AMI guess "max height" wasn't a good explanation on my part. Because it also needs min height. It's kinda like {min-height: 100%;} -and- {max-height: 100%;}. But that doesn't seem to work....
-
-
Re: Making a divs max height the height of the browser window
Mon, February 26, 2007 - 8:54 AMwell you shouldnt need max-height if your min-height is 100%. because its always going to result in height: 100%; -
-
Re: Making a divs max height the height of the browser window
Mon, February 26, 2007 - 11:24 AMBut I wanted to keep the max-height from being larger than the window... Still, setting min-height to 100% does nothing. It still only stays as large as it needs to based on the content within the div. That's why I was thinking perhaps there was a js trick in order... hmmm.... -
-
Re: Making a divs max height the height of the browser window
Mon, February 26, 2007 - 11:35 AM"But I wanted to keep the max-height from being larger than the window..."
if you set body {height: 100%;} the body will not expand beyond 100% of the initial window height (at least in moz, safari, and ie7 with xhtml strict, but i should think it would behave the same with transistional). Min and max height will not work unless the parent element has a defined height.
As for JS its not really trick... you might want to checkout prototype and yui js libraries. -
-
Re: Making a divs max height the height of the browser window
Mon, February 26, 2007 - 1:08 PMsetting body height to 100% doesn't do anything... when the table in this div grows to too many row to fit on the screen, it still triggers the main browser scroll bar to appear .... enabling you to scroll the entire web page. But I just want to scroll the div if the content is overflowing. The problem seems to be that the div does not have a fixed height - nor can it, because the size of the browser window is determining its "max height" -
-
Re: Making a divs max height the height of the browser window
Mon, February 26, 2007 - 6:37 PM..since this isn't going the route of JS, I've reposted in the more general web design forum with a link to some code....
web-design.tribe.net/thread/...5eda7b8e
-
-
-
-
-
-
