html - 如何设置页面统一的背景颜色，即使在滚动后也是如此？

Question

我有一个页面布局，其中包含 Bootstrap 容器。我正在使用此布局呈现页面。

在一个页面中，我的 div 只有屏幕高度的一半。我正在渲染另一个页面，它非常大(我必须向下滚动)。

设置container的background-color后，在渲染第一个页面时，只显示页面background-color的一半，而对于第二页，background-color 在整个页面上是统一的。

CSS

body, html {
    height: 100%;
}

.mainlayout {
    background-color: lightblue;
}

HTML

<div class='container-fluid'>

    <div class='row'>
    Here i am rendering my data for each page. (Flask `jinja` templates)
    </div>

</div>

我不确定如何使每个页面的 background-color 统一，覆盖整个屏幕。

Answer 1

html,body{
  height:100%;
}

body{
  background:#ccc;
  color:#333;
}

.mainlayout {
    background-color: lightblue;
}

<div class='container-fluid'>

    <div class='row'>
    Here i am rendering my data for each page. (Flask `jinja` templates)
    </div>

</div>