现在，我的页脚不在视口中，因为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/
答案 0 :(得分：2)
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>
答案 1 :(得分：0)
因为你的身体已经overflow: scroll了。
根据docs：
<强>隐藏
如有必要，内容将被剪裁以适合填充框。没有滚动条。
如果您想要滚动条，请使用flatMap()，或者您可以完全删除该属性。