# [web] Two questions: standards quirks

This topic is 4663 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

1) Is there any way to create an element that uses remaining vertical space in the browser viewport? See, I have a few DIVs that take up 150px up top, and another on the bottom that I want to fill the rest of the viewport. I do this because I want to isolate a scrollbar to the content area, not the whole page. Using height:100% leaves a scrollbar, so I presume the browser isn't factoring 150px into the height. 2) I had a previous design where I wanted to have a resizable background (again, because I'm experimenting with scroll-free designs). I "accomplished" this by making a fullscreen DIV with a z-index of -1. I found that when you define both width and height of the image as a percentage, it fills the space nicely. However: If you only define ONE (in order to preserve aspect ratio), the image will only resize larger. That is, if the browser window gets smaller than the image's original size, it's scrollbar mania. I was hoping someone had previous experience here and had found a solution. I thought I had an excellent concept to begin with... but with browser quirks popping up left and right, I've had to concede quite a few things and now the page is starting to look pretty plain. Thanks in advance...

##### Share on other sites
Quote:
 1) Is there any way to create an element that uses remaining vertical space in the browser viewport? See, I have a few DIVs that take up 150px up top, and another on the bottom that I want to fill the rest of the viewport. I do this because I want to isolate a scrollbar to the content area, not the whole page. Using height:100% leaves a scrollbar, so I presume the browser isn't factoring 150px into the height.

Sounds like you'd want to use fixed positioning. The CSS for what (I think) you want would look like this:
#topdiv {  position: fixed;  top: 0;  left: 0;  right: 0;  height: 150px;}#bottomdiv {  position: fixed;  top: 150px;  left: 0;  right: 0;  bottom: 0;  overflow: auto;}

##### Share on other sites
Hmm, I see. How does "fixed" work in relation to "absolute" and "relative"?

##### Share on other sites
fixed means the location is dependent on the top/left of the browser window and is independent of scrolling location.

Thus, a fixed location of 16,16 will always appear on the screen 16 pixels down and 16 pixels to the right of the top left corner - no matter how far the browser is scrolled. To be noted, IE does not support 'fixed'...

Absolute means that the location is x,y pixels from the top/left of the page. So if something is 1000 absolute pixels down the page, the user probably has to scroll to see it.

##### Share on other sites
Umm... that's good to know, except I'm trying to move away from scrollbar usage entirely. If I used that in the context of my page, I might as well use absolute positioning-- and the window I wanted to set at 100% of remaining height would STILL hang below the viewport.