由于 position:fixed 有几个缺点，我试图通过使用 flexbox 创建一个固定的页脚。我有一个带有方向行的 flex 容器，并对其应用了 overflow-y:auto。现在，当 flex 元素的内容超过可见区域的高度并且出现滚动条时， flex 元素不会将其高度拉伸(stretch)到容器的高度，而是保持在可见区域的高度。结果是文本没有完全被背景颜色覆盖。 HTML:
<body>
<div id="middle">
<nav>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.
</nav>
<main>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
Content shortened; more content to make the scrollbar appear
</main>
</div>
<!-- Main Bereich Ende -->
<!--Footer Anfang -->
<footer>
<div id="footerleft">
<h2>Letzte Änderung
<br>20.05.2018</h2>
</div>
<div id="footermiddle">
<h3>Copyright © 2018 xxx - Alle Rechte vorbehalten</h3>
</div>
<div id="footerright">
<a href="#jump-body">
<img src="images/buttonup.png" title="Zum Seitenanfang" alt="Zum Seitenanfang"></img>
</a>
</div>
</footer>
<!--Footer Ende -->
</body>
CSS:
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
#middle {
flex: 1 1 auto;
display: flex;
flex-direction: row;
align-items: stretch;
overflow-y: auto;
}
nav {
flex: 1;
background-color: blue;
}
main {
flex: 4;
background-color: maroon;
}
footer {
width: 100%;
flex: 0 0 auto;
display: flex;
}
#footerleft {
flex: 2;
}
#footermiddle {
flex: 6;
}
#footerright {
flex: 2;
}
#footerright img {
width: 30px;
height: 30px;
display: block;
margin: 0px auto auto;
}
如何解决这个问题？
最佳答案
只需删除 height: 100vh;来自 body选择器。默认情况下，高度是自动的，因此主体高度将根据其内容进行拉伸(stretch)。所以不要使用 min-height: 100vh; .
备注:img标签不应有结束标签 </img>
body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
#middle {
flex: 1 1 auto;
display: flex;
flex-direction: row;
align-items: stretch;
overflow-y: auto;
}
nav {
flex: 1;
background-color: blue;
}
main {
flex: 4;
background-color: maroon;
}
footer {
width: 100%;
flex: 1 0 auto;
display: flex;
}
#footerleft {
flex: 2;
}
#footermiddle {
flex: 6;
}
#footerright {
flex: 2;
}
#footerright img {
width: 30px;
height: 30px;
display: block;
margin: 0px auto auto;
}<div id="middle">
<nav>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.
</nav>
<main>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
Content shortened; more content to make the scrollbar appear
</main>
</div>
<footer>
<div id="footerleft">
<h2>Letzte Änderung
<br>20.05.2018</h2>
</div>
<div id="footermiddle">
<h3>Copyright © 2018 xxx - Alle Rechte vorbehalten</h3>
</div>
<div id="footerright">
<a href="#jump-body">
<img src="images/buttonup.png" title="Zum Seitenanfang" alt="Zum Seitenanfang">
</a>
</div>
</footer>关于css - 当溢出设置为自动时， flex 元素不会在交叉轴上拉伸(stretch)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50439618/