logo标签列表

“圣杯布局”使用 flexbox 的三栏布局

htmlcssflexbox
4
我试图使用新的 display: flex 语法来实现通常被称为“圣杯布局”的三列布局（请参见此ALA文章）。

要求如下：

  • 有一个页眉和页脚，在它们之间有三列
  • 外列具有固定宽度
  • 内列伸展以填充侧列之间的空间，有一个最小和最大宽度，超出这些范围则不应再扩展（因此容器也不应该扩展）
  • 直到内容将页脚推到下方，页脚应位于视口底部

我通过以下代码满足了前三个要求：

<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属性来处理这个问题吗？我似乎无法从中看到全貌。

你看到这个了吗：http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/？ - Nico O
哎呀，我确实看了那个，但我想我忽略了显而易见的答案。 - Stephan Muller
1个回答
3

.container { min-height: 100vh; }

1
html，body { height: 100％ } .container { min-height: 100％ } 也可以。 - misterManSam
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接