我正在尝试使用新的 display: flex 语法实现通常被描述为“ chalice ”(参见 ALA article)的三列布局。
要求如下:
- 一个页眉和页脚，中间有三列
- 外部列具有固定宽度
- 内栏会拉伸(stretch)以填充侧栏之间的空间，并有最小和最大宽度不会拉伸(stretch)(因此容器也不应该)
- 页脚应该位于视口(viewport)的底部，直到内容实际将其推到下方
我用下面的代码得到了前三个要求:
<body>
<div class="container">
<header class="masthead">
<h1>The Header</h1>
</header>
<div class="side-left column">
Left sidebar
</div>
<div class="middle column">
Content goes here
</div>
<div class="side-right column">
Right sidebar
</div>
<footer class="footer">
© Footer
</footer>
</div>
</body>
CSS:
.container {
display: flex;
flex-flow: row wrap;
min-width: 500px;
max-width: 1100px;
}
.masthead {
flex: 1 100%;
}
.side-left,
.side-right {
flex: 0 0 150px;
}
.middle {
flex: 1;
}
.footer {
flex: 1 100%;
}
现场直播:jsBin
但是，我坚持使用 100% 的高度。我已经尝试将某些列或容器设置为 height: 100% 或 min-height: 100% 但似乎都不起作用。我是否需要许多其他 flex 属性之一来处理这个问题？我似乎无法透过树木看到森林。
最佳答案
.container { 最小高度:100vh； }
关于html - "Holy Grail"使用flexbox的三列布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25933647/