代码之家  ›  专栏  ›  技术社区  ›  techguy2000

css网格单元格内容溢出不工作

css-grid overflow css html
  •  0
  • techguy2000  · 技术社区  · 6 年前

    现在,我的页脚不在视图端口中,因为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

    对此的正确修复方法是什么?

    下面是一个JSFIDLE链接: https://jsfiddle.net/b8a8ysso/1/

    2 回复  |  直到 6 年前
        1
  •  2
  •   Michael Benjamin    6 年前 

    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/

        2
  •  0
  •   amflare    6 年前

    因为你有 overflow: hidden; 穿在身上。

    根据 docs :

    隐藏的
    如有必要,可裁剪内容以适合填充框。没有提供滚动条。

    如果需要滚动条,请使用 overflow: scroll 或者您可以完全移除该属性。

    推荐文章
    Softly  ·  单选按钮未按预期取值
    1 年前
    NovoMannen  ·  导航中的下拉菜单在内容后面重叠
    1 年前
    Thirumal isireddy  ·  在导航栏顺风css中,img被扭曲,而不是将元素推到旁边
    1 年前
    eXor420  ·  如何在脚本标记中使用导出的函数?
    1 年前
    Hadi  ·  如何在无效和有效输入中选择用于更改样式的psoudo元素(after)
    1 年前
    IonicMan  ·  剑道网格在宽度过大时不显示某些列
    1 年前
    Kernier  ·  如何将数学公式支持添加到StacksEditor?
    1 年前
    Md. Ibrahim  ·  CSS网格项溢出小屏幕滚动
    1 年前
    Arjun V Srivatsa  ·  如何将系统时区信息分配给javascript中的变量?
    1 年前
    Akshay mek  ·  Vscode扩展建议不适用于某些文件夹
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号