Angular 7模板无法填满整个页面

Question

所以我正在尝试将此HTML页面转换为我的有角项目。它工作正常，但是当我进入角度时，它不会填满整个页面。这是一个令人眼花example乱的例子，这就是我所看到的。

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

在新窗口中运行角度预览。

Answer 1

您有col-md-6，左侧有一个猫头鹰轮播。

将其更改为col-md-3，而您好世界col-md-6将位于全屏中央。

Answer 2

在您的代码中，您将主体设置为显示弯曲，这会导致问题，如果您将display: flex的{​​{1}}移至您设置此位置的位置，则屏幕将完全填满达到高度。

我似乎看不到您要在哪里设置它，但是要显示它是这样，请添加以下内容以全屏显示屏幕。 （在body中）。

style.css

---

编辑-发现的问题

在（body { display: unset!important; } 行9622中找到了它，这引起了您的问题。

style.css

将其中的body { position: relative; height: 100%; overflow: auto; display: flex; flex-direction: column; font-family: "Montserrat",sans-serif; word-break: break-word; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } 删除，页面不再填满将不再是问题。

Answer 3

好吧，您的主要部分包含

<div class="col-md-6 d-none d-lg-block">...</div>
<div class="col-lg-6 h-100">...</div>

因此，一旦屏幕变得足够大，由于d-none而不会显示由于d-lg-block而未显示的第一个div，因此页面将分成两半。