CODEWITHSUNDEEP
htmlcssflexbox
blankface
blankface

Reputation: 6347

Trying to create a flex based layout of header, content and footer

enter image description here

I'm trying to achieve this layout. The thin lines are within which all three sections must be bound. The header and footer need to be vertically centered. Then the content should take the height till the footer hits the bottom of the viewport. Please note that the thin lines are only there to show the boundary... they shouldn't actually be in the code.

Work so far:

.wrapper{
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: pink;
}

header, footer, .content{
  border: 1px solid black;
}

header, footer {
  flex: 0 0 92px;
}

.content{
  flex: 1;
}
<div class="wrapper">
  <header>Header</header>
  <div class="content">Content</div>
  <footer>Footer</footer>
</div>

Upvotes: 2

Views: 5329

Answers (2)

Mohit Mutha
Mohit Mutha

Reputation: 3001

Give a margin and/or a width to the header, content and footer and align them to the center of the parent

  • Added a nested element to the main containers for header, content and footer.
  • Kept the width of the header, content and footer containers to 100% and gave a bottom border to them
  • Added a width to the inner divs and aligned them in the center of their respective parents

.wrapper{
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: pink;
  align-items: center;
}



header, footer, .content{
  margin: auto;
  border-bottom: 1px solid black;
  width:100%;
}

header .section,footer .section, .content .section{
  height:100%;
  width:80%;
  margin:auto;
  background-color:red
}

header, footer {
  flex: 0 0 92px;
}

.content{
  flex: 1;
}
<div class="wrapper">
  <header><div class="section">Header</div></header>
  <div class="content"><div class="section">Content</div></div>
  <footer><div class="section">Footer</div></footer>
</div>

Upvotes: 3

Zhenya Telegin
Zhenya Telegin

Reputation: 587

You can use align-items property to make vertical alignment inside header and footer

.wrapper{
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin-left: 10%;
  margin-right: 10%;
  background-color: pink;
}

header, footer, .content{
  border: 1px solid black;
}

header, footer {
  flex: 0 0 92px;
  display: flex;
  align-items: center;
}

.content{
  flex: 1;
}
<div class="wrapper">
  <header>Header</header>
  <div class="content">Content</div>
  <footer>Footer</footer>
</div>

Upvotes: 2

Related Questions