gpt4 book ai didi

html - "Holy Grail"使用flexbox的三列布局

转载 作者:可可西里 更新时间:2023-11-01 13:32:40 25 4
gpt4 key购买 nike

我正在尝试使用新的 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">
&copy; 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com