I have a basic design that has been working so far, but now needs to be modified for a couple of situations. The design has a header, subheader, main nav menu on the left, and a content area. The modification calls for the content area to be only as high as the viewable area of the viewport (no vertical scrollbar on the main browser window) but scrollable, with a fixed height "toolbar" at the bottom of that (which is not scrollable). Basically, within my content area, I need a scrollabe area that is only has high as the available area of the viewport between the subheader and the fixed height toolbar.
My questions are:
1) How do I "calculate" the height of my scrollabe area using CSS?
2) How do I get my fixed height toolbar to sit at the bottom of my content area, which is at the bottom of the viewport? This should not scroll with the scrollable area above it.
My basic page design is as follows:
<div id="header" />
<div id="subheader">
<div id="mainNavMenu" />
</div>
<div id="content">
<div id="scrollableDiv">
My scrollable content
</div>
<div id="toolbar" />
</div>
The bolded area above is what I am looking to add. My plan is to wrap the content with the div#scrollableDiv in the few instances that I need it, and to add the div#toolbar to the bottom of it. Again, this will only be done in a few cases, and I am trying to preserve the original design as much as possible to prevent me from having to go back and edit every page.
Any solutions/suggestions would be greatly appreciated.
Thanks in advance.No suggestions from anyone??CSS doesn't "calculate".wood_tah, I can't give you a definitive answer, but I think you can use the min-height and max-height CSS attributes.
See the answers to my similar question: Calculate current position (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?t=82610">http://www.webdeveloper.com/forum/showt ... hp?t=82610</a><!-- m -->)
And this articles, too: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/footers/">http://www.alistapart.com/articles/footers/</a><!-- m -->
HTH,
-JeffThanks for the replies.
I know CSS can't "calculate", but I thought there were settings you could use that would make it seem as if it was.
I have not been able to get this to work 100% the way I want -- does anyone else have any other suggestions that they can add to the previous ones, or any new ways to tackle my problem? Your help is greatly appreciated ...
My questions are:
1) How do I "calculate" the height of my scrollabe area using CSS?
2) How do I get my fixed height toolbar to sit at the bottom of my content area, which is at the bottom of the viewport? This should not scroll with the scrollable area above it.
My basic page design is as follows:
<div id="header" />
<div id="subheader">
<div id="mainNavMenu" />
</div>
<div id="content">
<div id="scrollableDiv">
My scrollable content
</div>
<div id="toolbar" />
</div>
The bolded area above is what I am looking to add. My plan is to wrap the content with the div#scrollableDiv in the few instances that I need it, and to add the div#toolbar to the bottom of it. Again, this will only be done in a few cases, and I am trying to preserve the original design as much as possible to prevent me from having to go back and edit every page.
Any solutions/suggestions would be greatly appreciated.
Thanks in advance.No suggestions from anyone??CSS doesn't "calculate".wood_tah, I can't give you a definitive answer, but I think you can use the min-height and max-height CSS attributes.
See the answers to my similar question: Calculate current position (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?t=82610">http://www.webdeveloper.com/forum/showt ... hp?t=82610</a><!-- m -->)
And this articles, too: <!-- m --><a class="postlink" href="http://www.alistapart.com/articles/footers/">http://www.alistapart.com/articles/footers/</a><!-- m -->
HTH,
-JeffThanks for the replies.
I know CSS can't "calculate", but I thought there were settings you could use that would make it seem as if it was.
I have not been able to get this to work 100% the way I want -- does anyone else have any other suggestions that they can add to the previous ones, or any new ways to tackle my problem? Your help is greatly appreciated ...