Div с динамической оставшейся высотой и полосой прокрутки

Question

Я пытаюсь найти решение для своей особой проблемы. У меня есть 2 div, первый - это заголовок с динамической высотой. Второй div должен заполнить оставшееся пространство страницы, а если содержимое слишком велико, появится полоса прокрутки.

Проблема в том, что мое решение для установки высоты второго div не соответствует полосе прокрутки.

Трудно объяснить, взглянуть на мой код, я сделал комментарии, чтобы вы столкнулись со своей проблемой.

HTML:

<div id="header_with_dynamic_height"> 
     This<br/>is<br/>the<br/>header<br/>content. 
    </div> 
    <div id="remaining_height_with_scrollbar"> 
     Here<br/>should<br/>be<br/>a<br/>scrollbar.<br/> 
     But<br/>the<br/>content<br/>overlaps.<br/> 
     1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/> 
     1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/> 
    </div> 

CSS:

html, body { 
     margin: 0; padding: 0; 
     height: 100%; 
    } 
    #header_with_dynamic_height { 
     background-color: blue; 
     float: left; width: 100%; 
    } 
    #remaining_height_with_scrollbar { 
     background-color: green; 
     height: 100%; 
     overflow: none; 
     /* If you change this to "scroll" or "auto", the content disappears */ 
    } 

Пожалуйста, смотрите также http://jsfiddle.net/T3qF8/2/. Измените переполнение на «авто» или «прокрутку», как должно быть, и посмотрите, как исчезнет весь второй div. Почему это происходит? Я не нашел для этого решения.

Заранее благодарен!

Answer 1

Вы должны использовать ширину: 100% в вашем div и переполнении: hidden; в теле

#remaining_height_with_scrollbar { 
    background-color: green; 
    height: 100%; 
    overflow: scroll; 
    width: 100%; 
    /* If you change this to "scroll" or "auto", the content disappears */ 
} 

Демо: http://jsfiddle.net/T3qF8/3/

Answer 2

Я нашел решение моей проблемы, но только с использованием макета таблицы: http://jsfiddle.net/Vedkw/68/

display:table; 

Но решение без таблиц будет быть намного лучше.

Answer 3

HTML:

<div class="table container"> 
    <div class="table-row header"> 
     <div>This is the header whose height is unknown</div> 
     <div>This is the header whose height is unknown</div> 
     <div>This is the header whose height is unknown</div> 
    </div> 
    <div class="table-row body"> 
     <div class="table-cell body-content-outer-wrapper"> 
      <div class="body-content-inner-wrapper"> 
       <div class="body-content"> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
        <div>This is the scrollable content whose height is unknown</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

.table { 
    display: table; 
} 

.table-row { 
    display: table-row; 
} 

.table-cell { 
    display: table-cell; 
} 

.container { 
    width: 400px; 
    height: 300px; 
} 

.header { 
    background: cyan; 
} 

.body { 
    background: yellow; 
    height: 100%; 
} 

.body-content-outer-wrapper { 
    height: 100%; 
} 

.body-content-inner-wrapper { 
    height: 100%; 
    position: relative; 
    overflow: auto; 
} 

.body-content { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

От: http://blogs.msdn.com/b/kurlak/archive/2015/02/20/filling-the-remaining-height-of-a-container-while-handling-overflow-in-css.aspx

JSFiddle: http://jsfiddle.net/352ntoz2/