Html Question posted in
Some basic documentation can be found here.

Html – How to align flex items (bars) on top and bottom of page, with content in the middle

Considering the following CSS/HTML block to build my screen layout, using flex, I need:

  • NAV BAR in the topmost

  • TITLE BAR in the topmost, under NAVBAR

  • COMMAND BAR in the very bottom

  • STATUS BAR in the bottom, above COMMAND BAR

  • Content: CHART and GAUGE in the middle, using all available height and width

Like:

|-----------------------------------|
|             NAVBAR                |
|-----------------------------------|
|           TITLE BAR               |
|-----------------------------------|
|                                   |
|             ↑                     |
|  <-  CONTENT (CHART + GAUGE) ->   |
| (fill remaining height and width) |
|             ↓                     |
|                                   |
|                                   |
|                                   |
|-----------------------------------|
|         STATUS BAR                |
|-----------------------------------|
|         COMMAND BAR               |
|-----------------------------------|

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  backgroud-color: grey;
}

.nav {
  width: 100%;
  height: auto;
  background-color: yellow;
}

.title {
  width: 100%;
  height: auto;
  background-color: orange
}

.content {
  padding: 10px;
  width: 100%;
  height: auto;
  overflow: hidden;
  flex-grow: 1;
}

.status {
  width: 100%;
  height: auto;
  background-color: orange
}

.footer {
  width: 100%;
  height: auto;
  background-color: red;
}

.blocks {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.chart {
  padding: 10px;
  display: flex;
  flex: 4;
  background-color: green;
}

.gauge {
  padding: 10px;
  display: flex;
  flex: 2;
  background-color: brown;
}
<div class="container">
  <div class="nav">
    NAV BAR
  </div>
  <div class="title">
    TITLE BAR
  </div>
  <div class="content">
    <div class="blocks">
      <div class="chart">
        CHART
      </div>
      <div class="gauge">
        GAUGE
      </div>
    </div>
  </div>
  <div class="status">
    STATUS BAR
  </div>
  <div class="footer">
    COMMAND BAR
  </div>
</div>

Unfortunatelly I’m having difficulties on flex behaviour… How can I fix it?

Tags:

2

Answers


  1. 0

    Not sure what this is what you’re after but you need to add height to the html and body element so the container can take that height, then I would make your content div flex so the blocks can grow to fill it

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

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: grey;
}

.nav {
  width: 100%;
  background-color: yellow;
}

.title {
  width: 100%;
  background-color: orange
}

.content {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  overflow: hidden;
  flex-grow: 1;
  display:flex;
}

.status {
  width: 100%;
  height: auto;
  background-color: orange
}

.footer {
  width: 100%;
  height: auto;
  background-color: red;
}

.blocks {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-grow: 1;
}

.chart {
  padding: 10px;
  display: flex;
  flex: 4;
  background-color: green;
  
  /* add this if you want the content centering */
  align-items:center;
}

.gauge {
  padding: 10px;
  display: flex;
  flex: 2;
  background-color: brown;
  
  /* add this if you want the content centering
  align-items:center; */
}
    <div class="container">
  <div class="nav">
    NAV BAR
  </div>
  <div class="title">
    TITLE BAR
  </div>
  <div class="content">
    <div class="blocks">
      <div class="chart">
        CHART - vertically centered with align-items
      </div>
      <div class="gauge">
        GAUGE - top aligned
      </div>
    </div>
  </div>
  <div class="status">
    STATUS BAR
  </div>
  <div class="footer">
    COMMAND BAR
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Your code is correct. All you need to do is change the height property in the .container to 100vh from 100%. The difference is that 100% will make the container as high as the content within it, while the 100vh will make the container fill the height of the viewport. I would also add some basic CSS resets such as removing all margins and paddings from the bodyand adding the box-sizing: border-box rule to all the elements (*), to make sure that the width of the "boxes" are not stretched out when adding margins, paddings, and borders.

    * { 
  box-sizing: 
  border-box;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  backgroud-color: grey;
}

.nav {
  width: 100%;
  height: auto;
  background-color: yellow;
}

.title {
  width: 100%;
  height: auto;
  background-color: orange
}

.content {
  padding: 10px;
  width: 100%;
  height: auto;
  overflow: hidden;
  flex-grow: 1;
}

.status {
  width: 100%;
  height: auto;
  background-color: orange
}

.footer {
  width: 100%;
  height: auto;
  background-color: red;
}

.blocks {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.chart {
  padding: 10px;
  display: flex;
  flex: 4;
  background-color: green;
}

.gauge {
  padding: 10px;
  display: flex;
  flex: 2;
  background-color: brown;
}
    <div class="container">
  <div class="nav">
    NAV BAR
  </div>
  <div class="title">
    TITLE BAR
  </div>
  <div class="content">
    <div class="blocks">
      <div class="chart">
        CHART
      </div>
      <div class="gauge">
        GAUGE
      </div>
    </div>
  </div>
  <div class="status">
    STATUS BAR
  </div>
  <div class="footer">
    COMMAND BAR
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search