我正在尝试使用带有页眉和页脚的 flexbox 列布局。当浏览器最大化时,布局看起来很干净。当您调整窗口大小时(如在手机上查看)我试图让 block 堆叠,但主要内容与左栏重叠,右栏与页脚重叠。
.wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: calc(100vh - 80px);
width: 70%;
margin: 0 auto;
text-align: center;
}
header {
padding: 20px;
background: #222930;
color: #E9E9E9;
height: 125px;
}
footer {
padding: 20px;
background: #222930;
color: white;
bottom: 0;
text-align: center;
}
main {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
background: #222930;
}
main .content {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
background: #222930;
color: #E9E9E9;
}
main .left {
width: 160px;
background: #222930;
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
color: #E9E9E9;
}
main .right {
width: 160px;
background: #222930;
color: white;
}
@media (max-width: 640px) {
main {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
main .left,
main .right {
width: auto;
height: 50px;
}
}
<div class="wrap">
<header>header</header>
<main>
<div class="content">content</div>
<div class="left">left</div>
<div class="right">right</div>
</main>
<footer>footer</footer>
</div>
我页面上还有更多内容,但我认为没有必要粘贴它。如果有人对我正在经历的事情感到好奇,这里是它最大的视觉效果: 这就是它在手机上的样子:
就像我说的,我试图让 block 彼此堆叠,或者甚至在缩小时让菜单变成下拉菜单,但页脚仍然重叠。
一些建议会很好,但不确定我在这里遗漏了什么。我第一次尝试 flexbox 方法..
最佳答案
看起来你的 flex 容器有一个固定的高度:
.wrap {
display: flex;
flex-direction: column;
height: calc(100vh - 80px); /* fixed height */
width: 70%;
margin: 0 auto;
text-align: center;
}
尝试使用 min-height
而不是 height
,这将允许容器增长。
关于html - Flexbox 布局在移动 View 中保持重叠的页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37143046/