Cut div at bottom of page

Question

Im using bootstrap 4.0.0-beta.2 and I have a css problem. I want following layout This is the html:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
 <div id="task" class="container">
      <div class="row">
        <div class="col-12">
          <div class="card card-shadow">
            <div class="card-header accent-color">
              FOOOOOOOO
            </div>
            <div class="card-body">
              <h4 class="card-title">BAAAR</h4>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
              <a href="#" class="btn btn-primary btn-answer">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="card card-shadow" id="paint">
            <div class="card-header accent-color">
              paint
            </div>
            <div class="card-body">
              <app-paint></app-paint>
            </div>
          </div>
        </div>
      </div>
    </div>

And what im trying to create is a layout of cards. I want the first card to stay within the col-12 width and adapt the hight after content. And then I want the second div to always end at bottom of page. No margin between. So I tried to add position:fixed, bottom:0 and height:100% but then the width get wierd and it cant handle resize of the page. So How can I force the second div to end at page bottom?

You want the second div to always be at the bottom of the page no matter the height of the content inside it? — hulkinBrain, Oct 25 '17 at 20:52
Try checking out this question? https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space. Also, mark this as duplicate if that helps. — Nandu Kalidindi, Oct 25 '17 at 20:57
@NanduKalidindi not related to boostrap nor flex , it is an out of date and subject duplicate in my opinion. boostrap-4 is about the flex model ;) — G-Cyrillus, Oct 25 '17 at 21:02

G-Cyrillus · Accepted Answer · 2017-10-25T21:17:17.107

You may use height and margins.

Boostrap class: .h-100 sets height:100% , but parent need an height where % can be calculated from (css added for html & body)

margin-top:auto and bottom 0 will send the second element at the bottom. boostrp classes used : mt-auto mb-0

html,
body {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container h-100"><!-- class added -->
  <div class="row h-100"><!-- class added -->
    <div class="col-12">
      <div class="card card-shadow">
        <div class="card-header accent-color">
          FOOOOOOOO
        </div>
        <div class="card-body">
          <h4 class="card-title">BAAAR</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
          <a href="#" class="btn btn-primary btn-answer">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-12 mb-0 mt-auto"><!-- class added -->
      <div class="card card-shadow" id="paint">
        <div class="card-header accent-color">
          paint
        </div>
        <div class="card-body">
          <app-paint>app-paint</app-paint>
        </div>
      </div>
    </div>
  </div>
</div>

or do you need the second div to expand ?

html,
body {
  height: 100%;
}

.custom-flex {
  flex: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container flex-column h-100">
  <!-- class added -->
  <div class="d-flex flex-column h-100">
    <div class="">
      <div class="card card-shadow">
        <div class="card-header accent-color">
          FOOOOOOOO
        </div>
        <div class="card-body">
          <h4 class="card-title">BAAAR</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
          <a href="#" class="btn btn-primary btn-answer">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="d-flex flex-column custom-flex">
      <div class="card card-shadow custom-flex" id="paint">
        <div class="card-header accent-color">
          paint
        </div>
        <div class="card-body">
          <app-paint>app-paint</app-paint>
        </div>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Oct 25 '17 at 22:35

I think the answer of this question would be to change the css of the card. If you are looking for to increase or decrease the space between the cards from top or from bottom you should change the css like so:

In your case for card shadow it would be

.d-flex [class*='card-shadow'] {
   margin-top: 2.5em;
   margin-bottm: 2.5em;
}

Use your own unit for css calculation em, px or whatever suit you.

Cut div at bottom of page

2 Answers2