Hi Folks. I'll do my best to phrase this as clearly as possible, please bear with me. I've attached a diagram which shows

The Background

I have an enclosing div which is position:fixed and pegged to the size of the viewport less a small area at the right, e.g.

.enclosing {
    position:fixed;
    top:0;
    right:200;
    bottom:0;
    left:0
}

inside I have two divs, a .title div of fixed height and a .content div, which I want to take up the rest of the containing block's height. Inside the content div is a .scrollWrap with overflow auto, which often contains tabular content which is much taller than the containing block.

The Question

I can't figure out a way to get the .content div to fill only the remaining height in .enclosing. I've tried approaches with both static and absolute positioning for the child divs, but invariably the .title pushes .content off the bottom of the viewport.

What I am trying to accomplish

  1. .content takes up whatever vertical space is left in the viewport after padding, margins, and the calculated height of .title.
  2. .scrollWrap expands to fill all of .content less the padding.
  3. content inside .scrollWrap which is taller than .scrollWrap can be viewed by scrolling inside .scrollWrap

Seems simple enough, but I have been bashing my head against this for an embarrassingly long amount of time. If somebody could clue me into a possible strategy, I'd be very grateful.

There's no problem changing the underlying page structure if that is what's called for.

  • Hmm, seems like attachment didn't get posted: http://s3.pixane.com.s3.amazonaws.com/doctype_diagram.png Idan Gazit over 7 years ago

1 answer

0
points
This was chosen as the best answer

Naturally, explaining it here in detail helped me figure out it.

Thank you, confessional debugging!

I needed this:

.title {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 50px;
}

.content {
    position: absolute;
    top: 50px;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
}

.scrollWrap {
    height: 100%;
    overflow: auto;
    display: block;
}
Answered over 7 years ago by Idan Gazit