CODEWITHSUNDEEP
cssflexbox
webkitfanz
webkitfanz

Reputation: 1315

flexbox stretching height of element with a difficult layout

I have the following HTML structure:

<div id="page-wrapper">
    <div>#banner</div>
    <div>#left-panel</div>
    <div>#content</div>
    <div>#footer</div>
</div>

The element placements

I am fairly new to flex, and was wondering I can achieve the following result:

If someone could please guide me through or know any tutorials out there that I can follow to achieve this.

Upvotes: 0

Views: 3779

Answers (3)

pol
pol

Reputation: 2701

This will help: https://jsfiddle.net/wbncm2j4/1/

#page-wrapper {
  display: flex;
  flex-flow: column wrap;
  height: 100vh;
}
#left-panel {
  background: #BBB;
  min-height: 100%;
  width: 150px;
  order: -1;
  flex: 0 0 auto;
}
#banner, #footer, #content {
  width: calc(100% - 150px);
}
#banner {
  background: #99C;
  height: 40px;
}
#footer {
  background: #C9C;
  height: 25px;
}
#content {
  background: #9C9;
  flex: 1 1 auto;
}

body { margin: 0; }
<div id="page-wrapper">
    <div id="banner">banner</div>
    <div id="left-panel">left-panel</div>
    <div id="content">content</div>
    <div id="footer">footer</div>
</div>

flex-flow: column wrap; and 100% height to left-panel.
Then set the height of the header & footer.
Use order to change the order in which the elements appear.

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 106048

You may use flex-grow and flex-wrap to achieve this:

* {
  margin: 0;
  box-sizing: border-box;
}
#page-wrapper {
  display: flex;
  flex-flow: column wrap;
  width: 100vw;
  height: 100vh;
}
div div {
  /* basic CSS and see them */
  width: 80vw;
  box-shadow: inset 0 0 0 1px;
  padding: 1em;
}
div:nth-child(2) {
  order: -1;
  /* reorder place in the flow defaut is 0; -1 put the element in front all  */
  width: 20vw;
  height: 100%;
  /* next element will show in next column */
  background:turquoise
}
div:nth-child(3) {
  flex: 1;/* or flex-grow:1; the short hand propertie works fine through the different browsers */
  /* will take whole space avalaible*/
  background:tomato
}
<div id="page-wrapper">
  <div>#banner</div>
  <div>#left-panel</div>
  <div>#content</div>
  <div>#footer</div>
</div>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122125

You just need to use flex-direction: column on parent element and make left-panel element take 100% of height.

#page-wrapper {
  display: flex;
  height: 100vh;
  flex-direction: column;
  flex-wrap: wrap;
}
#page-wrapper > div {
  border: 1px solid black;
  flex: 1;
  width: 80%;
}
#page-wrapper > div:nth-child(2) {
  flex: 0 0 100%;
  width: 20%;
  order: -1;
}
<div id="page-wrapper">
  <div>#banner</div>
  <div>#left-panel</div>
  <div>#content</div>
  <div>#footer</div>
</div>

Upvotes: 0

Related Questions