引导程序 4 + 角度中的正文和内容 div 高度 100答案

【问题标题】：body and content div height 100 in bootstrap 4 + angular引导程序 4 + 角度中的正文和内容 div 高度 100
【发布时间】：2018-10-17 17:32:36
【问题描述】：

我想设置<div class="card">页面或正文的中心，它在桌面浏览器上完美运行，但在移动视图中不起作用，我可以将它设置在中心使用...

html, body {
  height: 100%;
  background: linear-gradient(to top right, #fc2c77 0%, #6c4079 100%);
}

和

h-100，

align-items-center h-100

<div class="container h-100">
  <div class="row align-items-center h-100 pt-5 pb-5">
    <form class="col-12 wow fadeInUp " data-wow-delay="0.2s">
      <div class="card"> 
       ...
      </div>
    </form>
  </div>
</div>

在桌面浏览器上完美运行

但在移动视图中表格从顶部和底部剪切和正文在滚动时重复

【问题讨论】：

只是因为你的内容太多...如果你的设备太小你什么都做不了...但是你可以尝试删除字段之间的空间以使表单更紧凑.. .但我不知道这对设计来说是否是个好主意......
这是因为你强制 html 和 body 正好是视口高度的 100%。不要为它们指定高度，从容器元素中删除 h-100 类，并为其指定 min-height: 100vh。
感谢您的帮助，失礼。

标签： html css angular bootstrap-4

【解决方案1】：

为防止您的表单被剪切，请将display:table 或display:grid 添加到您的父级容器中：

<div class="container h-100 "style="display:grid">...</div> 或者： <div class="container h-100 d-table">...</div>

关于正文滚动处的线性渐变重复，请确保您的 html 和 body 填满页面：

body { min-height: 100%; overflow: auto; }

【讨论】：