时间戳

首页 > 解决方案 > 如何使这部分全屏高度？无论我们做什么，它都会在底部留下空白

html - 如何使这部分全屏高度？无论我们做什么，它都会在底部留下空白

问题描述

我们正在尝试使内容完全占据屏幕高度，但无论我们做什么，它都会在屏幕底部显示空白。怎么可能修复？

section {
  height: 100vh;
  background-size: cover;
  background: #FF512F;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FF512F, #DD2476);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FF512F, #DD2476);
  padding-top: 5%;
  /* New code */
  overflow: hidden;
  padding-top: 80px;
  margin-top: -100px;
  height: 150%;
}

.emp-profile {
  padding: 10%;
  border-radius: 0.5rem;
  background: #fff;
  margin-top: 80px;
  margin-bottom: 80px
}
<section *ngIf="user" (onlineUsers)="online($event)">
  <div class="container">
    <div class="emp-profile justify-content-center">
      ... ...
    </div>
  </div>
</section>

我不能使用 body 标签，因为这是一个有角度的独立组件，并且从该部分开始。

如何使该部分成为屏幕的全高？我们正在使用带有 Angular 6 的 Bootstrap 4

标签： htmltwitter-bootstrapcssbootstrap-4

解决方案

该部分有负边距。这会将整个部分向上移动 150 像素。也不要在 CSS 中定义高度两次。无论负边距是多少，它都必须加回高度......

section {
    height: calc(100vh + 80px);
    background-size: cover;
    background: #FF512F; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #FF512F, #DD2476); 
    background: linear-gradient(to right, #FF512F, #DD2476);
    padding-top: 80px;
    margin-top: -80px;
}

https://www.codeply.com/go/BdVBClITv0

推荐阅读