Sakutard Sakutard - 7 months ago 9
HTML Question

Make a div scroll when reaching max-height?

Items will be added to the center piece and I want it to grow according to it's content until the whole container reaches the window size/height. If it overflows I want the centerpiece to scroll instead the whole page. I can't figure out how to do it.

EDIT: Here's a picture to clarify how it's intended to work:
Image

The HTML:

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


The CSS:

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


https://fiddle.jshell.net/s9m7oe4v/1/

Thanks in advance!

Answer

you can use flexbox for that,

  • display:flex in your parent .container, as well in you.header and .footer,
  • apply flex-direction:column to .container
  • flex-basis:50% to .content

body,html {
  margin: 0;
  height:100%
}
.container {
  width: 100%;
  height: 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;
  max-height:100vh;
  border: 1px solid red;
  flex-basis:50%
}
<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>

Comments