Flex header, content, footer layout

问题

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>

回答1:

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>

回答2:

In addition to flexbox, you can also create this layout using CSS Grid.

fiddle

html,
body {
  margin: 0;
  height: 100%;
}

.container {
  display: grid;
  grid-template-rows: 92px 1fr 92px;
  height: 100%;
}

header,
footer {
  display: flex;
  align-items: center;
  border: 1px solid #DCE5EB;
}

.content {
  overflow: auto;
}

<div class="container">
  <header>Header</header>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem, ad corporis amet id aut rem similique culpa expedita placeat molestiae itaque quos, esse, adipisci in beatae nisi laboriosam eius!</div>
  <footer>Footer</footer>
</div>

来源：https://stackoverflow.com/questions/50165836/flex-header-content-footer-layout

标签

html

css

css3

flexbox