如何使div内容占据高度的100％

时间：2019-11-10 16:28:42

标签： html css twitter-bootstrap

我有以下具有自举程序样式的应用程序

两个列都具有相同的高度，但是，我希望两个列的内容对齐，以便两个部分中的按钮都处于相同的高度，这意味着列中的内容必须占据div元素中的所有空间。

我的组件看起来像这样：

<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;
}

enter image description here

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

3 个答案:

答案 0 :(得分：2)

这2列的高度已经相同，因为它们的父级是flexbox行。但是，每张卡都无法彼此对齐，因为它们具有不同的父容器。

唯一的选项（不设置固定高度）是使用弯曲方向列和按钮上的自动上边距将按钮强制到每张卡的底部...

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>

答案 1 :(得分：1)

我可能会从卡体内取出按钮，然后将align-self-center添加到按钮类中。

<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>

答案 2 :(得分：1)

<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>
  

我在卡片下方的单独课程中选择了按钮。希望对您有所帮助：）

相关问题
最新问题