html - css 网格单元格内容溢出不起作用

Question

现在，我的页脚不在视口(viewport)中，因为 main 中内容的高度比 main 高。我尝试了此处建议的解决方案，但仍然无法滚动 main 和显示页脚。

    .content {
        display: grid;
        grid-gap: 2px;
        height: 100%;
        grid-template-areas: "main-settings main";
        grid-template-columns: 200px 1fr;
        grid-template-rows: 1fr;
        width: 100%;
        min-height: 0;  /* NEW */
        min-width: 0;   /* NEW; needed for Firefox */
    }

Prevent content from expanding grid items

对此的正确解决方法是什么？

这是一个 jsfiddle 链接:https://jsfiddle.net/b8a8ysso/1/

Answer 1

body {
  font-size: 15px;
  margin: 0;
  color: beige;
  background-color: rgb(46, 46, 46);
}

.core {
  display: grid;
  grid-gap: 1px;
  height: 100vh;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto 0 1fr auto;  
  grid-template-areas:  "header header" 
                        "controls controls"
                        "carousel carousel"
                        "nav nav"
                        "empty empty"
                        "content content"
                        "footer footer";
}

.header {
  grid-area: header;
  display: grid;
  justify-content: center;
}

.nav {
  grid-area: nav;
}

.content {
  grid-area: content;
}

.empty {
  grid-area: empty;
}

.carousel {
  grid-area: carousel;
}

.controls {
  grid-area: controls;
}

.footer {
  grid-area: footer;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #222;
  color: #fff;
  background-color: #555;
  font-size: 0.75rem;
}

.content {
  display: grid;
  grid-gap: 2px;
  grid-template-areas: "main-settings main";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr;
  min-height: 0;
}

.main-settings {
  grid-area: main-settings;
}

.main {
  grid-area: main;
  overflow: auto;
}

<div class="core">
  <div class="header">header</div>
  <div class="controls">controls</div>
  <div class="carousel">carousel</div>
  <div class="nav">nav</div>
  <div class="empty"></div>
  <div class="content">
    <div class="main-settings">settings</div>
    <div class="main">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi dui. Etiam posuere ultrices urna dignissim tristique. Fusce commodo libero eget tortor commodo egestas. In hac habitasse platea dictumst. Sed congue, purus vitae dignissim convallis,
      arcu urna euismod justo, eget congue mi neque posuere nibh. Fusce tristique ex sapien, in posuere nisl faucibus vitae. Ut sed enim accumsan, laoreet orci sed, fringilla urna. Donec blandit sodales lorem, sit amet hendrerit ligula egestas eu. Praesent
      congue lectus elit, id ultricies diam auctor id. Suspendisse eget ante at velit cursus cursus molestie vitae nibh. Duis urna sem, convallis vitae justo et, tempor elementum tellus. Donec dignissim nec dolor elementum pharetra. Nullam eleifend venenatis
      tortor, et molestie ex ornare ut. Quisque nulla metus, vehicula finibus nisi convallis, pharetra efficitur orci. Ut hendrerit accumsan lacus, volutpat pellentesque odio facilisis ut. In mattis arcu a lacus volutpat, porta interdum nulla dignissim.
      Donec aliquet purus elit, quis vulputate quam rhoncus quis. Mauris volutpat pulvinar lectus eu porttitor. Etiam sit amet dui non arcu interdum sagittis. Pellentesque diam libero, fermentum eget efficitur sed, elementum sed eros. Morbi ultricies,
      leo sit amet tristique ornare, lectus odio semper elit, eu blandit felis augue a leo. Praesent feugiat, erat eu finibus imperdiet, diam ex elementum risus, id congue est nisl accumsan lectus. Donec ac maximus dui. Pellentesque eu lobortis ipsum.
      Donec pulvinar sem non ante pulvinar, vitae varius lacus dictum. Duis bibendum lacus sit amet dui laoreet, eget sodales mauris sollicitudin. Nulla ultricies luctus purus a tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
      gravida consequat erat dictum viverra. Aliquam erat volutpat. Duis porttitor sem vehicula nunc lobortis, eu consectetur massa rutrum. In hac habitasse platea dictumst. Phasellus malesuada ullamcorper lectus, sed pretium nisi pulvinar bibendum. Morbi
      vestibulum hendrerit magna, non lacinia metus elementum quis. Curabitur interdum lacus libero, ut semper velit efficitur at. Sed hendrerit lobortis est ut congue. In eget mi volutpat, varius diam in, tempus massa. Pellentesque non laoreet lectus.
      Suspendisse eu metus ut turpis viverra semper ut eget risus. In iaculis, nibh eget facilisis rutrum, leo urna laoreet sapien, in commodo risus nisl vestibulum massa. Nulla rhoncus volutpat metus. Proin vel massa aliquet, interdum nunc nec, interdum
      ex. Curabitur condimentum odio a massa elementum, vitae ullamcorper mauris congue. Etiam semper sapien nisl, a molestie est bibendum quis. Sed elementum quam non feugiat tempus. Nam justo nunc, pulvinar ut risus at, eleifend aliquet tortor. Donec
      convallis consequat commodo. Integer urna mi, fermentum vel condimentum a, pellentesque et justo. Proin ultrices arcu metus, nec rutrum nisl scelerisque eu. Morbi ullamcorper luctus eros eu placerat. Donec viverra imperdiet egestas. Nunc feugiat
      laoreet odio et suscipit. Cras interdum ante in dictum vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sagittis pellentesque quam vel convallis. Nullam in purus ut tortor sodales laoreet. Proin consequat aliquam feugiat.
      Donec eget dolor eu sem fringilla blandit. Curabitur semper ex ac sem sagittis, in tincidunt neque tincidunt. Ut dignissim erat urna, nec dictum odio pharetra sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi dui.
      Etiam posuere ultrices urna dignissim tristique. Fusce commodo libero eget tortor commodo egestas. In hac habitasse platea dictumst. Sed congue, purus vitae dignissim convallis, arcu urna euismod justo, eget congue mi neque posuere nibh. Fusce tristique
      ex sapien, in posuere nisl faucibus vitae. Ut sed enim accumsan, laoreet orci sed, fringilla urna. Donec blandit sodales lorem, sit amet hendrerit ligula egestas eu. Praesent congue lectus elit, id ultricies diam auctor id. Suspendisse eget ante
      at velit cursus cursus molestie vitae nibh. Duis urna sem, convallis vitae justo et, tempor elementum tellus. Donec dignissim nec dolor elementum pharetra. Nullam eleifend venenatis tortor, et molestie ex ornare ut. Quisque nulla metus, vehicula
      finibus nisi convallis, pharetra efficitur orci. Ut hendrerit accumsan lacus, volutpat pellentesque odio facilisis ut. In mattis arcu a lacus volutpat, porta interdum nulla dignissim. Donec aliquet purus elit, quis vulputate quam rhoncus quis. Mauris
      volutpat pulvinar lectus eu porttitor. Etiam sit amet dui non arcu interdum sagittis. Pellentesque diam libero, fermentum eget efficitur sed, elementum sed eros. Morbi ultricies, leo sit amet tristique ornare, lectus odio semper elit, eu blandit
      felis augue a leo. Praesent feugiat, erat eu finibus imperdiet, diam ex elementum risus, id congue est nisl accumsan lectus. Donec ac maximus dui. Pellentesque eu lobortis ipsum. Donec pulvinar sem non ante pulvinar, vitae varius lacus dictum. Duis
      bibendum lacus sit amet dui laoreet, eget sodales mauris sollicitudin. Nulla ultricies luctus purus a tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida consequat erat dictum viverra. Aliquam erat volutpat. Duis porttitor
      sem vehicula nunc lobortis, eu consectetur massa rutrum. In hac habitasse platea dictumst. Phasellus malesuada ullamcorper lectus, sed pretium nisi pulvinar bibendum. Morbi vestibulum hendrerit magna, non lacinia metus elementum quis. Curabitur
      interdum lacus libero, ut semper velit efficitur at. Sed hendrerit lobortis est ut congue. In eget mi volutpat, varius diam in, tempus massa. Pellentesque non laoreet lectus. Suspendisse eu metus ut turpis viverra semper ut eget risus. In iaculis,
      nibh eget facilisis rutrum, leo urna laoreet sapien, in commodo risus nisl vestibulum massa. Nulla rhoncus volutpat metus. Proin vel massa aliquet, interdum nunc nec, interdum ex. Curabitur condimentum odio a massa elementum, vitae ullamcorper mauris
      congue. Etiam semper sapien nisl, a molestie est bibendum quis. Sed elementum quam non feugiat tempus. Nam justo nunc, pulvinar ut risus at, eleifend aliquet tortor. Donec convallis consequat commodo. Integer urna mi, fermentum vel condimentum a,
      pellentesque et justo. Proin ultrices arcu metus, nec rutrum nisl scelerisque eu. Morbi ullamcorper luctus eros eu placerat. Donec viverra imperdiet egestas. Nunc feugiat laoreet odio et suscipit. Cras interdum ante in dictum vehicula. Interdum
      et malesuada fames ac ante ipsum primis in faucibus. Mauris sagittis pellentesque quam vel convallis. Nullam in purus ut tortor sodales laoreet. Proin consequat aliquam feugiat. Donec eget dolor eu sem fringilla blandit. Curabitur semper ex ac sem
      sagittis, in tincidunt neque tincidunt. Ut dignissim erat urna, nec dictum odio pharetra sed.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi dui. Etiam posuere ultrices urna dignissim tristique. Fusce commodo libero eget
      tortor commodo egestas. In hac habitasse platea dictumst. Sed congue, purus vitae dignissim convallis, arcu urna euismod justo, eget congue mi neque posuere nibh. Fusce tristique ex sapien, in posuere nisl faucibus vitae. Ut sed enim accumsan, laoreet
      orci sed, fringilla urna. Donec blandit sodales lorem, sit amet hendrerit ligula egestas eu. Praesent congue lectus elit, id ultricies diam auctor id. Suspendisse eget ante at velit cursus cursus molestie vitae nibh. Duis urna sem, convallis vitae
      justo et, tempor elementum tellus. Donec dignissim nec dolor elementum pharetra. Nullam eleifend venenatis tortor, et molestie ex ornare ut. Quisque nulla metus, vehicula finibus nisi convallis, pharetra efficitur orci. Ut hendrerit accumsan lacus,
      volutpat pellentesque odio facilisis ut. In mattis arcu a lacus volutpat, porta interdum nulla dignissim. Donec aliquet purus elit, quis vulputate quam rhoncus quis. Mauris volutpat pulvinar lectus eu porttitor. Etiam sit amet dui non arcu interdum
      sagittis. Pellentesque diam libero, fermentum eget efficitur sed, elementum sed eros. Morbi ultricies, leo sit amet tristique ornare, lectus odio semper elit, eu blandit felis augue a leo. Praesent feugiat, erat eu finibus imperdiet, diam ex elementum
      risus, id congue est nisl accumsan lectus. Donec ac maximus dui. Pellentesque eu lobortis ipsum. Donec pulvinar sem non ante pulvinar, vitae varius lacus dictum. Duis bibendum lacus sit amet dui laoreet, eget sodales mauris sollicitudin. Nulla ultricies
      luctus purus a tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida consequat erat dictum viverra. Aliquam erat volutpat. Duis porttitor sem vehicula nunc lobortis, eu consectetur massa rutrum. In hac habitasse platea
      dictumst. Phasellus malesuada ullamcorper lectus, sed pretium nisi pulvinar bibendum. Morbi vestibulum hendrerit magna, non lacinia metus elementum quis. Curabitur interdum lacus libero, ut semper velit efficitur at. Sed hendrerit lobortis est ut
      congue. In eget mi volutpat, varius diam in, tempus massa. Pellentesque non laoreet lectus. Suspendisse eu metus ut turpis viverra semper ut eget risus. In iaculis, nibh eget facilisis rutrum, leo urna laoreet sapien, in commodo risus nisl vestibulum
      massa. Nulla rhoncus volutpat metus. Proin vel massa aliquet, interdum nunc nec, interdum ex. Curabitur condimentum odio a massa elementum, vitae ullamcorper mauris congue. Etiam semper sapien nisl, a molestie est bibendum quis. Sed elementum quam
      non feugiat tempus. Nam justo nunc, pulvinar ut risus at, eleifend aliquet tortor. Donec convallis consequat commodo. Integer urna mi, fermentum vel condimentum a, pellentesque et justo. Proin ultrices arcu metus, nec rutrum nisl scelerisque eu.
      Morbi ullamcorper luctus eros eu placerat. Donec viverra imperdiet egestas. Nunc feugiat laoreet odio et suscipit. Cras interdum ante in dictum vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sagittis pellentesque
      quam vel convallis. Nullam in purus ut tortor sodales laoreet. Proin consequat aliquam feugiat. Donec eget dolor eu sem fringilla blandit. Curabitur semper ex ac sem sagittis, in tincidunt neque tincidunt. Ut dignissim erat urna, nec dictum odio
      pharetra sed.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi dui. Etiam posuere ultrices urna dignissim tristique. Fusce commodo libero eget tortor commodo egestas. In hac habitasse platea dictumst. Sed congue, purus
      vitae dignissim convallis, arcu urna euismod justo, eget congue mi neque posuere nibh. Fusce tristique ex sapien, in posuere nisl faucibus vitae. Ut sed enim accumsan, laoreet orci sed, fringilla urna. Donec blandit sodales lorem, sit amet hendrerit
      ligula egestas eu. Praesent congue lectus elit, id ultricies diam auctor id. Suspendisse eget ante at velit cursus cursus molestie vitae nibh. Duis urna sem, convallis vitae justo et, tempor elementum tellus. Donec dignissim nec dolor elementum
      pharetra. Nullam eleifend venenatis tortor, et molestie ex ornare ut. Quisque nulla metus, vehicula finibus nisi convallis, pharetra efficitur orci. Ut hendrerit accumsan lacus, volutpat pellentesque odio facilisis ut. In mattis arcu a lacus volutpat,
      porta interdum nulla dignissim. Donec aliquet purus elit, quis vulputate quam rhoncus quis. Mauris volutpat pulvinar lectus eu porttitor. Etiam sit amet dui non arcu interdum sagittis. Pellentesque diam libero, fermentum eget efficitur sed, elementum
      sed eros. Morbi ultricies, leo sit amet tristique ornare, lectus odio semper elit, eu blandit felis augue a leo. Praesent feugiat, erat eu finibus imperdiet, diam ex elementum risus, id congue est nisl accumsan lectus. Donec ac maximus dui. Pellentesque
      eu lobortis ipsum. Donec pulvinar sem non ante pulvinar, vitae varius lacus dictum. Duis bibendum lacus sit amet dui laoreet, eget sodales mauris sollicitudin. Nulla ultricies luctus purus a tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing
      elit. Mauris gravida consequat erat dictum viverra. Aliquam erat volutpat. Duis porttitor sem vehicula nunc lobortis, eu consectetur massa rutrum. In hac habitasse platea dictumst. Phasellus malesuada ullamcorper lectus, sed pretium nisi pulvinar
      bibendum. Morbi vestibulum hendrerit magna, non lacinia metus elementum quis. Curabitur interdum lacus libero, ut semper velit efficitur at. Sed hendrerit lobortis est ut congue. In eget mi volutpat, varius diam in, tempus massa. Pellentesque non
      laoreet lectus. Suspendisse eu metus ut turpis viverra semper ut eget risus. In iaculis, nibh eget facilisis rutrum, leo urna laoreet sapien, in commodo risus nisl vestibulum massa. Nulla rhoncus volutpat metus. Proin vel massa aliquet, interdum
      nunc nec, interdum ex. Curabitur condimentum odio a massa elementum, vitae ullamcorper mauris congue. Etiam semper sapien nisl, a molestie est bibendum quis. Sed elementum quam non feugiat tempus. Nam justo nunc, pulvinar ut risus at, eleifend aliquet
      tortor. Donec convallis consequat commodo. Integer urna mi, fermentum vel condimentum a, pellentesque et justo. Proin ultrices arcu metus, nec rutrum nisl scelerisque eu. Morbi ullamcorper luctus eros eu placerat. Donec viverra imperdiet egestas.
      Nunc feugiat laoreet odio et suscipit. Cras interdum ante in dictum vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sagittis pellentesque quam vel convallis. Nullam in purus ut tortor sodales laoreet. Proin consequat
      aliquam feugiat. Donec eget dolor eu sem fringilla blandit. Curabitur semper ex ac sem sagittis, in tincidunt neque tincidunt. Ut dignissim erat urna, nec dictum odio pharetra sed.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
      vitae nisi dui. Etiam posuere ultrices urna dignissim tristique. Fusce commodo libero eget tortor commodo egestas. In hac habitasse platea dictumst. Sed congue, purus vitae dignissim convallis, arcu urna euismod justo, eget congue mi neque posuere
      nibh. Fusce tristique ex sapien, in posuere nisl faucibus vitae. Ut sed enim accumsan, laoreet orci sed, fringilla urna. Donec blandit sodales lorem, sit amet hendrerit ligula egestas eu. Praesent congue lectus elit, id ultricies diam auctor id.
      Suspendisse eget ante at velit cursus cursus molestie vitae nibh. Duis urna sem, convallis vitae justo et, tempor elementum tellus. Donec dignissim nec dolor elementum pharetra. Nullam eleifend venenatis tortor, et molestie ex ornare ut. Quisque
      nulla metus, vehicula finibus nisi convallis, pharetra efficitur orci. Ut hendrerit accumsan lacus, volutpat pellentesque odio facilisis ut. In mattis arcu a lacus volutpat, porta interdum nulla dignissim. Donec aliquet purus elit, quis vulputate
      quam rhoncus quis. Mauris volutpat pulvinar lectus eu porttitor. Etiam sit amet dui non arcu interdum sagittis. Pellentesque diam libero, fermentum eget efficitur sed, elementum sed eros. Morbi ultricies, leo sit amet tristique ornare, lectus odio
      semper elit, eu blandit felis augue a leo. Praesent feugiat, erat eu finibus imperdiet, diam ex elementum risus, id congue est nisl accumsan lectus. Donec ac maximus dui. Pellentesque eu lobortis ipsum. Donec pulvinar sem non ante pulvinar, vitae
      varius lacus dictum. Duis bibendum lacus sit amet dui laoreet, eget sodales mauris sollicitudin. Nulla ultricies luctus purus a tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida consequat erat dictum viverra. Aliquam
      erat volutpat. Duis porttitor sem vehicula nunc lobortis, eu consectetur massa rutrum. In hac habitasse platea dictumst. Phasellus malesuada ullamcorper lectus, sed pretium nisi pulvinar bibendum. Morbi vestibulum hendrerit magna, non lacinia metus
      elementum quis. Curabitur interdum lacus libero, ut semper velit efficitur at. Sed hendrerit lobortis est ut congue. In eget mi volutpat, varius diam in, tempus massa. Pellentesque non laoreet lectus. Suspendisse eu metus ut turpis viverra semper
      ut eget risus. In iaculis, nibh eget facilisis rutrum, leo urna laoreet sapien, in commodo risus nisl vestibulum massa. Nulla rhoncus volutpat metus. Proin vel massa aliquet, interdum nunc nec, interdum ex. Curabitur condimentum odio a massa elementum,
      vitae ullamcorper mauris congue. Etiam semper sapien nisl, a molestie est bibendum quis. Sed elementum quam non feugiat tempus. Nam justo nunc, pulvinar ut risus at, eleifend aliquet tortor. Donec convallis consequat commodo. Integer urna mi, fermentum
      vel condimentum a, pellentesque et justo. Proin ultrices arcu metus, nec rutrum nisl scelerisque eu. Morbi ullamcorper luctus eros eu placerat. Donec viverra imperdiet egestas. Nunc feugiat laoreet odio et suscipit. Cras interdum ante in dictum
      vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sagittis pellentesque quam vel convallis. Nullam in purus ut tortor sodales laoreet. Proin consequat aliquam feugiat. Donec eget dolor eu sem fringilla blandit. Curabitur
      semper ex ac sem sagittis, in tincidunt neque tincidunt. Ut dignissim erat urna, nec dictum odio pharetra sed.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi dui. Etiam posuere ultrices urna dignissim tristique. Fusce
      commodo libero eget tortor commodo egestas. In hac habitasse platea dictumst. Sed congue, purus vitae dignissim convallis, arcu urna euismod justo, eget congue mi neque posuere nibh. Fusce tristique ex sapien, in posuere nisl faucibus vitae. Ut
      sed enim accumsan, laoreet orci sed, fringilla urna. Donec blandit sodales lorem, sit amet hendrerit ligula egestas eu. Praesent congue lectus elit, id ultricies diam auctor id. Suspendisse eget ante at velit cursus cursus molestie vitae nibh. Duis
      urna sem, convallis vitae justo et, tempor elementum tellus. Donec dignissim nec dolor elementum pharetra. Nullam eleifend venenatis tortor, et molestie ex ornare ut. Quisque nulla metus, vehicula finibus nisi convallis, pharetra efficitur orci.
      Ut hendrerit accumsan lacus, volutpat pellentesque odio facilisis ut. In mattis arcu a lacus volutpat, porta interdum nulla dignissim. Donec aliquet purus elit, quis vulputate quam rhoncus quis. Mauris volutpat pulvinar lectus eu porttitor. Etiam
      sit amet dui non arcu interdum sagittis. Pellentesque diam libero, fermentum eget efficitur sed, elementum sed eros. Morbi ultricies, leo sit amet tristique ornare, lectus odio semper elit, eu blandit felis augue a leo. Praesent feugiat, erat eu
      finibus imperdiet, diam ex elementum risus, id congue est nisl accumsan lectus. Donec ac maximus dui. Pellentesque eu lobortis ipsum. Donec pulvinar sem non ante pulvinar, vitae varius lacus dictum. Duis bibendum lacus sit amet dui laoreet, eget
      sodales mauris sollicitudin. Nulla ultricies luctus purus a tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida consequat erat dictum viverra. Aliquam erat volutpat. Duis porttitor sem vehicula nunc lobortis, eu consectetur
      massa rutrum. In hac habitasse platea dictumst. Phasellus malesuada ullamcorper lectus, sed pretium nisi pulvinar bibendum. Morbi vestibulum hendrerit magna, non lacinia metus elementum quis. Curabitur interdum lacus libero, ut semper velit efficitur
      at. Sed hendrerit lobortis est ut congue. In eget mi volutpat, varius diam in, tempus massa. Pellentesque non laoreet lectus. Suspendisse eu metus ut turpis viverra semper ut eget risus. In iaculis, nibh eget facilisis rutrum, leo urna laoreet sapien,
      in commodo risus nisl vestibulum massa. Nulla rhoncus volutpat metus. Proin vel massa aliquet, interdum nunc nec, interdum ex. Curabitur condimentum odio a massa elementum, vitae ullamcorper mauris congue. Etiam semper sapien nisl, a molestie est
      bibendum quis. Sed elementum quam non feugiat tempus. Nam justo nunc, pulvinar ut risus at, eleifend aliquet tortor. Donec convallis consequat commodo. Integer urna mi, fermentum vel condimentum a, pellentesque et justo. Proin ultrices arcu metus,
      nec rutrum nisl scelerisque eu. Morbi ullamcorper luctus eros eu placerat. Donec viverra imperdiet egestas. Nunc feugiat laoreet odio et suscipit. Cras interdum ante in dictum vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus.
      Mauris sagittis pellentesque quam vel convallis. Nullam in purus ut tortor sodales laoreet. Proin consequat aliquam feugiat. Donec eget dolor eu sem fringilla blandit. Curabitur semper ex ac sem sagittis, in tincidunt neque tincidunt. Ut dignissim
      erat urna, nec dictum odio pharetra sed.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae nisi dui. Etiam posuere ultrices urna dignissim tristique. Fusce commodo libero eget tortor commodo egestas. In hac habitasse platea dictumst.
      Sed congue, purus vitae dignissim convallis, arcu urna euismod justo, eget congue mi neque posuere nibh. Fusce tristique ex sapien, in posuere nisl faucibus vitae. Ut sed enim accumsan, laoreet orci sed, fringilla urna. Donec blandit sodales lorem,
      sit amet hendrerit ligula egestas eu. Praesent congue lectus elit, id ultricies diam auctor id. Suspendisse eget ante at velit cursus cursus molestie vitae nibh. Duis urna sem, convallis vitae justo et, tempor elementum tellus. Donec dignissim nec
      dolor elementum pharetra. Nullam eleifend venenatis tortor, et molestie ex ornare ut. Quisque nulla metus, vehicula finibus nisi convallis, pharetra efficitur orci. Ut hendrerit accumsan lacus, volutpat pellentesque odio facilisis ut. In mattis
      arcu a lacus volutpat, porta interdum nulla dignissim. Donec aliquet purus elit, quis vulputate quam rhoncus quis. Mauris volutpat pulvinar lectus eu porttitor. Etiam sit amet dui non arcu interdum sagittis. Pellentesque diam libero, fermentum eget
      efficitur sed, elementum sed eros. Morbi ultricies, leo sit amet tristique ornare, lectus odio semper elit, eu blandit felis augue a leo. Praesent feugiat, erat eu finibus imperdiet, diam ex elementum risus, id congue est nisl accumsan lectus. Donec
    </div>
  </div>
  <div class="footer">footer</div>
</div>

https://jsfiddle.net/b8a8ysso/2/