Jawad Asghar Ali Jawad Asghar Ali - 4 months ago 15
HTML Question

transform an old layout to flexbox

Currently I have this layout.



* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
min-height: 100%;
}
#wrapper {
height: 100%;
min-height: 100%;
position: relative;
background-color: red;
}
header {
height: 100%;
min-height: 100vh;
position: relative;
background-color: green;
text-align: center;
}
#header-top {
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
outline: 1px dotted red;
background-color: blue;
}
#header-middle {
position: relative;
top: 50%;
transform: translateY(-50%);
background-color: yellow;
outline: 1px dotted red;
}
#header-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: grey;
outline: 1px dotted red;
}

<div id="wrapper">
<header>
<div id="header-top">
<p>I am fixed at the top</p>
</div>
<div id="header-middle">
<p>I am vertically centered</p>
</div>
<div id="header-bottom">
<p>I am stuck at the bottom but not fixed</p>
</div>
</header>
</div>





How do I use flexbox here to get the same layout.


  • The html, body and #wrapper needs to expand visually to surround all the child elements.

  • The header is to fill the entire viewport.

  • The #header-top is fixed at the top containing a logo floated to left and navigation floated to right with no explicit height.

  • The #header-middle is to be vertically centered inside the header.

  • The #header-bottom is like a sticky footer stuck at the bottom but no fixed.



Fiddle

Answer

Use this:

header {
  display: flex; /* Magic begins */
  flex-direction: column; /* Stack vertically */
  height: 100%; /* As tall as the containing block */
  justify-content: space-between; /* Distribute the flex items */
}

* {
  padding: 0;
  margin: 0;
}
html, body, header {
  height: 100%;
}
header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: green;
  text-align: center;
}
header > div {
  outline: 1px dotted red;
}
#header-top {
  background-color: blue;
}
#header-middle {
  background-color: yellow;
}
#header-bottom {
  background-color: grey;
}
<header>
  <div id="header-top">
    <p>I am fixed at the top</p>
  </div>
  <div id="header-middle">
    <p>I am vertically centered</p>
  </div>
  <div id="header-bottom">
    <p>I am stuck at the bottom but not fixed</p>
  </div>
</header>

Comments