CODEWITHSUNDEEP
htmlcss
Jeff
Jeff

Reputation: 1800

Scrollable nested divs - max height 100%

I've seen similar posts, but haven't found a post that answers my specific problem.

I have a layout with a left and right column. Inside the left column, I have two rows.

I'd like the bottom row of the left column to be scrollable, but not to scroll in such a way that hides the top row.

    <div id="left">
      <div class="top-row-header">
        Some header text
      </div>
      <div class="bottom-row-content">
        Some text. Scrollable independent of the header
     </div>
   </div>
    <div id="right>
      Some scrollable text
    </div>

Here is a fiddle: http://jsfiddle.net/bec4pm98/

I've gotten close, but the bottom row in the left column is too big. I want it to size itself relative to the size of the row up top.

Upvotes: 0

Views: 57

Answers (1)

Darren Gourley
Darren Gourley

Reputation: 1808

The left-inner div has a height of 100%,but you also have the jumbotron as a sibling. Set the height of jumbotron to 20% and the height of left-inner to 80%.

Example: http://jsfiddle.net/bL99yds1/

It's not perfect, but I'm on my mobile and it's quite hard to tinker. You get the gist though.

Upvotes: 1

Related Questions