1

I have the following structure in my html:

<div id="parent1" class="col-sm-12 col-md-6" style="height: 100%;></div>
<div id="parent2" class="col-sm-12 col-md-6">
    <div id="child">
        <div id="childs_child"></div>
    </div>
</div>

Classes col-sm-12 col-md-6 are from the Bootstrap Grid System and make both #parent elements fit side by side on a large screen. Both #parent2 and #child size height automatically to the content of #childs_child. The problem is if #childs_child content is large then the entire page scrolls. I'd like for #child to scroll if #childs_child content is large.

I've tried setting #parent2 { max-height: 100%; } #child { max-height: 100%; overflow-y: auto; } but #child just grows to fit #childs_child.

I there a purely CSS way to accomplish this without setting a specific height on either #parent2 or #child or do I need to use Javascript? I' don't want to set a specific height property because when #childs_child content is small and scrolling is not necessary, I want #parent and #child to shrink to fit and not be full height of the page.

Zoe
  • 27,060
  • 21
  • 118
  • 148
Brian
  • 2,702
  • 5
  • 37
  • 71
  • you might find this useful http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window?rq=1 –  Mar 14 '14 at 16:18
  • @Igupta - Unfortunately, that's not exactly what I'm looking for. – Brian Mar 14 '14 at 16:21

0 Answers0