在页面底部剪切 div答案

【问题标题】：Cut div at bottom of page在页面底部剪切 div
【发布时间】：2018-04-07 02:13:51
【问题描述】：

我正在使用 bootstrap 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 宽度内并在内容之后调整高度。然后我希望第二个 div 总是在页面底部结束。之间没有余量。所以我尝试添加 position:fixed, bottom:0 和 height:100% 但是宽度变得很奇怪并且它无法处理页面的大小调整。那么如何强制第二个 div 在页面底部结束？

【问题讨论】：

您希望第二个 div 始终位于页面底部，无论其中内容的高度如何？
试试这个问题？ stackoverflow.com/questions/90178/…。另外，如果有帮助，请将其标记为重复。
@NanduKalidindi 与 boostrap 或 flex 无关，在我看来，这是一个过时的主题重复。 boostrap-4 是关于 flex 模型的 ;)

标签： css bootstrap-4

【解决方案1】：

您可以使用高度和边距。

Boostrap 类：.h-100 设置 height:100%，但父级需要一个可以从中计算 % 的高度（为 html 和正文添加 css）

margin-top:auto 和 bottom 0 将发送底部的第二个元素。使用的 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>

【讨论】：

【解决方案2】：

我认为这个问题的答案是改变卡片的css。如果您正在寻找从顶部或底部增加或减少卡片之间的空间，您应该像这样更改 css：

在你的卡片影子的情况下，它会是

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

使用您自己的单位进行 css 计算 em、px 或任何适合您的。

【讨论】：