Flex标题，内容，页脚布局 [英] Flex header, content, footer layout

问题描述

在下面的代码中，我希望内容部分填充到页脚打到屏幕底部的地方。

编辑：也许我应该更清楚地说明中心对齐。页眉和页脚应垂直对齐，并且所有三项都需要从左侧垂直线开始，如下所示：

我怎样才能达到这个目的？

{margin：0; padding：0;} container {display：flex; flex-direction：列;位置：固定; top：0; width：100％;} header {height：92px; background-color：#FFFFFF; border：1px solid＃DCE5EB;} footer {height：92px; border：1px solid＃DCE5EB; background-color：#FFFFFF;}。content {height：700px; flex：auto; background-color：#FFFFFF;}

< div class = 容器 > <报头GT;页眉和LT; /报头> < div classcontent>内容< / div> < footer>页脚< / footer>< / div>

>解决方案

您忘记在您的课程 content 中添加 = 。
这是一个简单的错字。

以及您的内容。因为您的静态高度为标题和页脚。
您可以给 100vh 加入您的内容，并减少标头和<$ c $的高度c> footer 加上不要忘记考虑 border 即 2px total。
这将解决您的问题。编辑：垂直对齐可以通过给行高等于高度。
并在您的保证金中对齐。根据您的要求，您可以使用保证金或填充。
或者甚至可以使用

pre $ display $ flex;
align-items：center;


删除 94px + 94px 来自您的内容

< {margin：0; padding：0;} container {display：flex; flex-direction：列; top：0; border：10px纯黑色;} header {display：flex; align-items：center;身高：92px; background-color：#FFFFFF; border：1px solid＃DCE5EB; padding：0 30px;} footer {height：92px;显示：flex; border：1px solid＃DCE5EB; background-color：#FFFFFF; align-items：center; padding：0 30px;}。content {min-height：calc（100vh - 94px - 94px）; background-color：#FFFFFF; padding：0 30px;}

< div class =容器> <报头GT;页眉和LT; /报头> < div class =content>内容< / div> < footer>页脚< / footer>< / div>

In the following code, I want the content section to fill out to the point the footer hits the bottom of the screen.

EDIT: perhaps I should've been a bit more clear with the center align. The header and footer should be vertically aligned and all three items need to start from the left vertical line as shown below:

How can I achieve this?

html, body {
  margin: 0;
  padding: 0;
}

container{
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  width: 100%;
}

header {
    height: 92px;
    background-color: #FFFFFF;
    border: 1px solid #DCE5EB;
}

footer {
    height: 92px;
    border: 1px solid #DCE5EB;
    background-color: #FFFFFF;
}

.content {
    height: 700px;
    flex: auto;
    background-color: #FFFFFF;
}

<div class="container">
  <header>Header</header>
  <div class"content">Content</div>
  <footer>Footer</footer>
</div>

解决方案

You forgot to add = in your class content. that's a simple typo.

And for your content. As you have static height for header and footer. You can give height of 100vh to your content and reduce the height of header and footer plus not to forget to consider border i.e 2px total. And it will solve your problem.

EDIT: Vertical-Align can be achieved by giving line-height equal to height. And to align it in your margin. You can either use, margin or padding, depending on your requirement. Or you can even use

display:flex;
align-items:center;

Remove 94px + 94px from your content

html,
body {
  margin: 0;
  padding: 0;
}

container {
  display: flex;
  flex-direction: column;
  top: 0;
  border: 10px solid black;
}

header {
  display: flex;
  align-items: center;
  height: 92px;
  background-color: #FFFFFF;
  border: 1px solid #DCE5EB;
  padding: 0 30px;
}

footer {
  height: 92px;
  display: flex;
  border: 1px solid #DCE5EB;
  background-color: #FFFFFF;
  align-items: center;
  padding: 0 30px;
}

.content {
  min-height: calc(100vh - 94px - 94px);
  background-color: #FFFFFF;
  padding: 0 30px;
}

<div class="container">
  <header>Header</header>
  <div class="content">Content</div>
  <footer>Footer</footer>
</div>

这篇关于Flex标题，内容，页脚布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！