Сделать прокрутку div при достижении максимальной высоты?

Question

Элементы будут добавлены к центральной части, и я хочу, чтобы она развивалась в соответствии с ее содержимым, пока весь контейнер не достигнет размера/высоты окна. Если он переполняется, я хочу, чтобы центральная часть прокручивала вместо нее всю страницу. Я не могу понять, как это сделать.

КОД:

.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: table; 
 
} 
 
.header { 
 
    display: table-row; 
 
} 
 
.content { 
 
    background-color: #FFF; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    white-space: normal; 
 
    min-height: 10vh; 
 
    max-height: 100vh; 
 
} 
 
.footer { 
 
    display: table-row; 
 
}

<div class="container"> 
 
    <div class="header "> 
 
    Header 
 
    </div> 
 

 
    <div class="content"> 
 
    Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    </div> 
 

 
    <div class="footer"> 
 
    Footer 
 
    </div> 
 
</div>

Fiddle

EDIT: Вот картинка, чтобы выяснить, как она предназначена для работы:

Answer 1

вы можете использовать flexbox для того,

• display:flex в родителя .container, а также в вас .header и .footer,
• применяются flex-direction:column к .container
• flex:1 к .content (расти соответственно окно высота)

body { 
 
    margin: 0 
 
} 
 
.container { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction:column 
 
} 
 
.header, .footer { 
 
display:flex; 
 
} 
 
.content { 
 
    background-color: #FFF; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    white-space: normal; 
 
    min-height: 10vh; 
 
    border: 1px solid red; 
 
    flex:1 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    Header 
 
    </div> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique commodo nunc, at vestibulum lectus vehicula ut. Nam a orci sed dui convallis finibus sed non purus. Nullam porta, dolor eu dapibus finibus, tortor mi luctus libero, at cursus urna 
 
    ligula et eros. In sagittis lectus in nisl viverra, eu aliquet neque porta. Nunc rutrum fringilla est quis dapibus. Integer a lobortis purus, pretium condimentum nisi. Morbi non finibus lectus, nec pretium mi. Sed pretium, metus ut tempus varius, 
 
    eros urna congue elit, at congue magna dolor ut risus. Duis at velit quis nisl feugiat iaculis at sed orci. Nulla consectetur sem ligula, et auctor ante molestie sed. Curabitur consequat nunc velit, at rutrum tortor suscipit eget. Proin quis aliquet 
 
    ante. Cras tempus interdum orci nec elementum. Phasellus dictum mauris eu nunc pellentesque gravida. Ut pharetra arcu a velit iaculis cursus. Nunc porta hendrerit orci ac cursus. Fusce ut feugiat libero. Etiam odio mi, tempus non lorem ac, volutpat 
 
    cursus ligula. Aliquam semper odio ac turpis aliquam euismod sed non arcu. Pellentesque vestibulum id orci vitae euismod. Integer dignissim, risus eget aliquam finibus, dolor est fringilla lectus, vitae posuere lacus enim vitae dolor. Aenean lobortis 
 
    gravida ante, vitae tempor dui interdum sed. Donec in neque rutrum, vestibulum tortor et, tempor ligula. Donec sit amet quam in quam pretium rhoncus ut nec justo. Maecenas rutrum aliquet turpis, in dictum est imperdiet viverra. Vivamus auctor, tellus 
 
    sed iaculis mattis, risus ligula rhoncus velit, at varius nulla lacus non arcu. Integer sagittis neque vitae massa aliquet pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non iaculis tellus, 
 
    non faucibus mi. Maecenas venenatis dolor eros, in elementum ipsum bibendum et. Ut sed dui augue. Vivamus ac enim ac leo tristique convallis. Pellentesque erat massa, tempus eget hendrerit vitae, fringilla id urna. Nunc sit amet orci et tellus euismod 
 
    pellentesque eu id ante. Phasellus quis purus sapien. Nunc molestie porttitor odio, non tempor metus dapibus quis. Donec placerat fringilla purus et ultrices. Donec consectetur facilisis urna vel porttitor. Sed id semper tellus, vitae mollis justo. 
 
    Aliquam pharetra, lorem vel consequat posuere, diam odio sodales risus, at vehicula neque massa eu nisi. Cras viverra vitae nulla at posuere. Phasellus maximus cursus odio eget auctor. Mauris dapibus elit ut blandit euismod. Phasellus pulvinar sagittis 
 
    fermentum. Donec libero neque, ultricies luctus ornare a, accumsan eu leo. Aenean tincidunt ullamcorper ante, id laoreet risus vehicula sit amet. Curabitur lacus ex, pulvinar quis interdum eu, tincidunt sed nunc. Aliquam tempor arcu nec ipsum vehicula 
 
    tincidunt. Cras at risus eget tellus mollis malesuada. Fusce nec nisi ut mauris facilisis luctus sodales et tellus. Etiam eu placerat leo. Sed augue arcu, faucibus viverra mollis at, tincidunt sit amet enim. Phasellus ac lorem eget felis ornare aliquam. 
 
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam enim dui, feugiat quis tortor eget, laoreet dapibus metus. Nam auctor eget justo accumsan consequat. Quisque bibendum urna quis facilisis ullamcorper. 
 
    </div> 
 
    <div class="footer"> 
 
    Footer 
 
    </div> 
 
</div>

Answer 2

Попробуйте добавить позицию: исправлено; в классе «контент». См. Если это работает для вас.

Answer 3

вы хотите, чтобы прокрутить так я говорю вам это прокручивается, но после того, как 100vh (в данном случае ты дать div"content" полной высоты экрана), что является max-height ты дать содержание если вы поставите max-height, может быть, 20vh вы увидите, что он работает

Answer 4

Используйте это:

.dyn-height { 
    width:100px; 
    max-height:250px; 
    overflow-y:auto; 
} 

REFE г: http://jsfiddle.net/q4CqZ/6/

Решение на ваш вопрос:

.content { 
 
    width: 100px; 
 
    max-height: 250px; 
 
    overflow-y: auto; 
 
}

<div class="content"> 
 
    Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
</div>