How to make div content occupy 100% of the height

Question

I have the following application styled with bootstrap

Both columns have the same height, however, I want the content of both columns to be aligned so that the buttons in both sections are at the same height, meaning that the content in the columns must occupy all space in the div element.

My component looks like this:

<div id="section" class="container-fluid">
    <div class="row" style="height: 100%">
        <div class="col-6 text-center d-flex flex-column justify-content-center align-items-center">
          <div class="card text-center" style="border: none; height: 100%">
              <h1>
                Title ONE
              </h1>
              <div class="card-body">
                <h5 class="card-title">Id mei error ignota mentitum.</h5>
                <h5 class="card-title">Lorem ipsum dolor sit amet, vero invenire cum et, semper</h5>
                <h5 class="card-title">mea sumo doctus scripta cu, te qui omnes numquam mentitum.</h5>
                <a href="#" class="btn btn-outline-info" style="border-radius:20px;">BUTTON ONE</a>
              </div>
            </div>
          </div>
          <div class="col-6 d-flex flex-column justify-content-center align-items-center">
            <div class="card text-center" style="border: none; height: 100%">
              <h1>
                Title TWO
              </h1>
              <div class="card-body">
                <h5 class="card-title">His te nibh vulputate interpretaris, eros error nullam vix ut. Nullam discere commune ei ius, zril vocent ea sed. Per cu augue melius fabulas.</h5>
                <h5 class="card-title">Eu nec hendrerit dissentias, eos aperiam prodesset no.</h5>
                <h5 class="card-title">Mollis tibique vis te, has eu veri euismod repudiare.</h5>
                <a href="#" class="btn btn-outline-info" style="border-radius:20px;">BUTTON TWO</a>
              </div>
            </div>
        </div>
    </div>
  </div>

CSS

.card-title {
    padding: 10px;
    font-weight: lighter;
}


#section {
    padding: 20px;
}

https://stackblitz.com/edit/angular-bsky85

You are required to post a [mcve] here, within your question and not a link to your site or any third party site. — Rob, Nov 10 '19 at 16:30

score 2 · Accepted Answer · answered Nov 10 '19 at 16:53

The 2 columns are already the same height because their parent is a flexbox row. However, there's no way for each card to align with each other because they have a different parent container.

The only option (without setting fixed heights) is to force the button to the bottom of each card using flex direction column and auto top margin on the buttons...

https://www.codeply.com/p/GBGNRe8fve

   <div class="row" style="height: 100%">
        <div class="col-6 text-center d-flex flex-column justify-content-center align-items-center">
            <div class="card text-center" style="border: none; height: 100%">
                <h1> Title ONE </h1>
                <div class="card-body d-flex flex-column align-items-center">
                    <h5 class="card-title">Id mei error ignota mentitum.</h5>
                    <h5 class="card-title">Lorem ipsum dolor sit amet, vero invenire cum et, semper</h5>
                    <h5 class="card-title">mea sumo doctus scripta cu, te qui omnes numquam mentitum.</h5>
                    <a href="#" class="btn btn-outline-info mt-auto" style="border-radius:20px;">BUTTON ONE</a>
                </div>
            </div>
        </div>
        <div class="col-6 d-flex flex-column justify-content-center align-items-center">
            <div class="card text-center" style="border: none; height: 100%">
                <h1> Title TWO </h1>
                <div class="card-body d-flex flex-column align-items-center">
                    <h5 class="card-title">His te nibh vulputate interpretaris, eros error nullam vix ut. Nullam discere commune ei ius, zril vocent ea sed. Per cu augue melius fabulas.</h5>
                    <h5 class="card-title">Eu nec hendrerit dissentias, eos aperiam prodesset no.</h5>
                    <h5 class="card-title">Mollis tibique vis te, has eu veri euismod repudiare.</h5>
                    <a href="#" class="btn btn-outline-info mt-auto" style="border-radius:20px;">BUTTON TWO</a>
                </div>
            </div>
        </div>
    </div>

score 1 · Answer 2 · answered Nov 10 '19 at 16:52

I would probably take out the button from the card body, then adding a align-self-center into the button class.

<div id="section" class="container-fluid">
    <div class="row" style="height: 100%">
        <div class="col-6 text-center d-flex flex-column justify-content-center align-items-center">
          <div class="card text-center" style="border: none; height: 100%">
              <h1>
                Title ONE
              </h1>
              <div class="card-body">
                <h5 class="card-title">Id mei error ignota mentitum.</h5>
                <h5 class="card-title">Lorem ipsum dolor sit amet, vero invenire cum et, semper</h5>
                <h5 class="card-title">mea sumo doctus scripta cu, te qui omnes numquam mentitum.</h5>
              </div>
              <a href="#" class="btn btn-outline-info align-self-center" style="border-radius:20px;">BUTTON ONE</a>
            </div>
          </div>
          <div class="col-6 d-flex flex-column justify-content-center align-items-center">
            <div class="card text-center " style="border: none; height: 100%">
              <h1>
                Title TWO
              </h1>
              <div class="card-body">
                <h5 class="card-title">His te nibh vulputate interpretaris, eros error nullam vix ut. Nullam discere commune ei ius, zril vocent ea sed. Per cu augue melius fabulas.</h5>
                <h5 class="card-title">Eu nec hendrerit dissentias, eos aperiam prodesset no.</h5>
                <h5 class="card-title">Mollis tibique vis te, has eu veri euismod repudiare.</h5>
              </div>
              <a href="#" class="btn btn-outline-info align-self-center" style="border-radius:20px;">BUTTON TWO</a>
            </div>
        </div>
    </div>
  </div>

score 1 · Answer 3 · answered Nov 10 '19 at 16:53

<div id="section" class="container-fluid">
   <div class="row" style="height: 100%">
      <div class="col-6 text-center d-flex flex-column justify-content-center align-items-center">
         <div class="card text-center" style="border: none; height: 100%">
            <h1>
               Title ONE
            </h1>
            <div class="card-body">
               <div>
                  <h5 class="card-title">Id mei error ignota mentitum.</h5>
                  <h5 class="card-title">Lorem ipsum dolor sit amet, vero invenire cum et, semper</h5>
                  <h5 class="card-title">mea sumo doctus scripta cu, te qui omnes numquam mentitum.</h5>
               </div>
            </div>
         </div>
      </div>
      <div class="col-6 flex-column justify-content-center align-items-center">
         <div class="card text-center" style="border: none; height: 100%">
            <h1>
               Title TWO
            </h1>
            <div class="card-body">
               <h5 class="card-title">His te nibh vulputate interpretaris, eros error nullam vix ut. Nullam discere commune ei ius, zril vocent ea sed. Per cu augue melius fabulas.</h5>
               <h5 class="card-title">Eu nec hendrerit dissentias, eos aperiam prodesset no.</h5>
               <h5 class="card-title">Mollis tibique vis te, has eu veri euismod repudiare.</h5>
            </div>
         </div>
      </div>
      <div class="col-6 text-center ">
         <a href="#" class="btn btn-outline-info" style="border-radius:20px;">BUTTON ONE</a>
      </div>
      <div class="col-6 text-center ">
         <a href="#" class="btn btn-outline-info" style="border-radius:20px;">BUTTON TWO</a>
      </div>
   </div>
</div>

I have taken the buttons in a seperate class below the cards. Hope it helps :)

How to make div content occupy 100% of the height

3 Answers3