Css 角度7模板是'；不要填满整页

所以我试图将这个html页面转换成我的angular项目。它工作得很好，但是当我转到angular时，它并没有填满整个页面。这是一个stackblitz的例子，这就是我看到的

---

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

左侧有一个owl转盘的col-md-6

将其更改为col-md-3，hello world col-md-6将在全屏中央显示

---

好吧，你的主要部分包括

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

。。。
...

因此，一旦屏幕变得足够大，由于

d-none

而未显示的第一个div将由于

d-lg-block

而显示，因此页面将一分为二。

在您的代码中，您正在将主体设置为显示flex，这会导致问题，如果您删除主体的

display:flex

，无论您在何处设置此选项，屏幕都将完全填充高度

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

style.css中）


编辑-发现问题

在（
style.css
）第9622行找到它，这导致了您的问题

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
}

display:flex
在这里，将其移除，页面不填充将不再是问题。
hello不应该在中间，左边有一个幻灯片，我以为它是偶然出现的。它是空的。所以我这么想。正如JB Nizet所提到的，d-lg-block导致它只在桌面显示器上显示。是的，不，它也有两面。StackBlitz的新功能是，屏幕有两个侧面，左侧用于幻灯片放映，右侧用于用户输入。我只是想知道为什么页面没有填满。“页面没有填满”不是很精确。您希望显示什么、在哪里以及为什么？这解决了它，但我将进行更多的测试。以确保这是可以的。然后我会将其标记为答案谢谢，请确保不要在有帮助的地方两次定义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
}