Home / Questions / 384960
Accepted
Nicolas Oñate
Asked: 2020-08-27 00:22:34 +0800 CST 2020-08-27 00:22:34 +0800 CST

Occupy all available space in columns

  • 772

I am making a layout of a web view with a container, inside it, three columns and a footer, I am trying that although the columns are empty they occupy all the available space until reaching the footer, I have tried to achieve it with flexboxbut I do not get that occupy it.

I can't use absolute units since the size of the screen is variable and it would look bad.

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #000;
  color: white;
}
.wrapper {
  padding: 50px 0 172px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
*{
   border:1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="col-4">col 1</div>
      <div class="col-4">col 2</div>
      <div class="col-4">col 3</div>
    </div>
  </div>
  <footer>
    <div class="container">
      <div class="row" >
        <div class="col-12 justify-content-center">
          <p class="text-center">footer</p>
        </div>
      </div>
    </div>
  </footer>
</div>

How can I make the columns occupy up to the footer?

css

2 Answers

  1. Best Answer

    I can think of using class h-100 (height 100% of parent), but you have to put it on all nested elements for it to work. In the wrapper I have used vh-100 (100% of the viewport, that is, 100% of the view)

    footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #000;
  color: white;
}
.wrapper {
  padding: 50px 0 172px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
*{
   border:1px solid red;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper vh-100">
  <div class="container h-100">
    <div class="row h-100">
      <div class="col-4 h-100">col 1</div>
      <div class="col-4 h-100">col 2</div>
      <div class="col-4 h-100">col 3</div>
    </div>
  </div>
  <footer>
    <div class="container">
      <div class="row" >
        <div class="col-12 justify-content-center">
          <p class="text-center">footer</p>
        </div>
      </div>
    </div>
  </footer>
</div>

    • 5

  2. One solution would be to do it using display: grid. Assuming that we know the height that the will have, <footer>you could assign that height to the row and to the row that occupies .wrapperassign it 1fr so that it tries to occupy the remaining space.

    For that we must make it .rowoccupy height: 100%and the bodyone height: 100vhso that it has a size that is not auto and thus be able to distribute all the space.

    body {
  height: 100vh;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #000;
  color: white;
}

.wrapper {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 50px;
}

.wrapper .container .row{
  height: 100%;
}

*{
   border:1px solid red;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="col-4">col 1</div>
      <div class="col-4">col 2</div>
      <div class="col-4">col 3</div>
    </div>
  </div>
  <footer>
    <div class="container">
      <div class="row" >
        <div class="col-12 justify-content-center">
          <p class="text-center">footer</p>
        </div>
      </div>
    </div>
  </footer>
</div>

    • 3