ページの一番下にあるdivを切ります

Question

私はブートストラップ4.0.0-beta.2を使用していますが、私はCSSの問題があります。私はレイアウト 次これは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>

そして、何イム作成しようとしているが、カードのレイアウトです。 最初のカードをcol-12幅内に収めて、コンテンツの後ろに高さを合わせたい。そして、私は2番目のdivが常にページの最後で終了するようにします。間にマージンはありません。だから私は位置を固定しようとしました：固定、下：0と高さ：100％が、その後、幅がwierdになると、ページのサイズ変更を処理することができません。だから、どのようにして2番目のdivをページの最後で終了させることができますか？

Answer 1

高さとマージンを使用できます。

ブートストラップ・クラス：.h-100セットheight:100%が、親は

マージントップ（CSSがHTML &体のために添加）％から算出することができる高さが必要オートとボトム0は、底部で第2の要素を送信します。使用boostrpクラス：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>

---

またはあなたが展開する第二のdivが必要なのでしょうか？

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>

Answer 2

私はこの質問の答えは、カードのCSSを変更することだと思います。それは

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

は独自のものを使用するだろう影カードのためのあなたの場合は

：あなたは上部または下部からからのカードの間にスペースを増減させるために探している場合は、そのようなCSSを変更する必要があります単位のCSS計算のem、pxまたは何でもあなたに合う。