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

Html – Css: flex column that fill 100% space from header to footer

I’m learning html/css vanilla design.
My layout should be an header, a footer and 3 columns that fill all the space, whatever their content.
I’m thinking in a layout grid-based for the 3 columns, and idea was to use display:flex; for stretch the central column for fill 100% height of the parent container.

body {
margin: 0px;
padding: 0px;
box-sizing: border-box;  
}
header {
  position: sticky;
  top: 0;
  background-color:rgb(89, 89, 165);
  height: 40px;
  display: flex;
  justify-content: end;
  align-items: center;
  flex: 1;
  padding: 0.1em;
}

footer {
  bottom: 0;
  position: fixed;
  width: 100%;
  padding: 5px;
  background-color: darkslategray;
  height: 2vm;
  font-style: italic;
  font-size: 1vm;
  display: flex;
}

.main-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  justify-items: center;
  .main-column {
    display: flex;
    border-style: groove;
    border-width: 4px;
    padding: 1em;
    justify-content: center;
    justify-self: stretch;
    align-self: stretch;
  }
}



   
 <body>
  <header>
    ...
  </header>
  <div class="main-container">
    <div class="left-column">
      ...
    </div>
    <div class="main-column">
      ...
    </div>
    <div class="right-column">
      ...
    </div>
  </div>
  <footer>
    ...
  </footer>
</body>

https://codepen.io/idum/pen/GgKpmNd

Problem is that central column don’t fill all the space.

Why?

Tags:

2

Answers


  1. 0

    If you use a non-relative height for the footer (in my example 20px, to which is added two times 5px padding), you can use calc in a height setting for the main column.

    In my example I defined the main content’s heigth as calc(100vh - 70px), which is the full window height minus 40px for the header and 30px for the footer:

    body {
margin: 0px;
padding: 0px;
box-sizing: border-box;  
}
header {
  position: sticky;
  top: 0;
  background-color:rgb(89, 89, 165);
  height: 40px;
  display: flex;
  justify-content: end;
  align-items: center;
  flex: 1;
  padding: 0.1em;
}

footer {
  bottom: 0;
  position: fixed;
  width: 100%;
  padding: 5px;
  background-color: darkslategray;
  height: 20pxvm;
  font-style: italic;
  font-size: 1vm;
  display: flex;
}

.main-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  justify-content: center;
  height: calc(100vh - 70px);
}
.main-container  .main-column {
    display: flex;
    border-style: groove;
    border-width: 4px;
    padding: 1em;
    justify-content: center;
    align-self: stretch;
 }
}
    <body>
  <header>
    ...
  </header>
  <div class="main-container">
    <div class="left-column">
      ...
    </div>
    <div class="main-column">
      ...
    </div>
    <div class="right-column">
      ...
    </div>
  </div>
  <footer>
    ...
  </footer>
</body>
    Login or Signup to reply.
  2. 0

    In your main container, Height is related with content of div.
    but if you want to set custom height, you can set height use vh.
    so add in main-container class "height:custom_height vh"
    for example "height:90vh"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search