Machen Sie ein div Scroll wenn Sie maximale Höhe erreichen?

Question

Items werden dem mittleren Teil hinzugefügt und ich möchte, dass es entsprechend seinem Inhalt wächst, bis der gesamte Container die Fenstergröße/-höhe erreicht. Wenn es überläuft, möchte ich das Mittelstück, um stattdessen die ganze Seite zu scrollen. Ich kann nicht herausfinden, wie es geht.

Die CODE:

.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: Hier ist ein Bild zu klären, wie es arbeiten soll ist:

Answer 1

Sie flexbox dafür verwenden können,

• display:flex in Ihrer Eltern .container sowie in Ihnen .header und .footer,
• flex-direction:column
• flex:1 zu .content-.container gelten (wachsen entsprechend dem Fenster Höhe)

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

Versuchen Sie, Position hinzuzufügen: behoben; in der Klasse "Inhalt". Siehe Wenn das für Sie funktioniert.

Answer 3

Sie es wollen, so blättern i Ihnen sagen, es rollt aber nach 100vh (in diesem Fall, dass Sie die div"content" die volle Höhe des Bildschirms gegeben hat), das ist die max-height Sie den Inhalt gegeben hat wenn Sie setzen max-height um vielleicht 20vh Sie werden sehen, dass es

Answer 4

Mit dieser funktioniert:

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

Refe r: http://jsfiddle.net/q4CqZ/6/

Lösung auf Ihre Frage:

.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>