用背景颜色完全填充页面答案

【问题标题】：Fill the page entirely with background color用背景颜色完全填充页面
【发布时间】：2019-12-18 07:27:38
【问题描述】：

如何将绿色扩展到底部？以及如何将 CRUD 也向左移动

所以你可以看到它不能完全填满页面。

这是我在 VueJS 中的代码

    <template>
    <div class="container-fluid">
        <h1>CRUD</h1>
        <div class="my-form col-xs-1">
            <b-card class="box">
                <b-form-group id="input-group-1">
                    <b-form-input
                            id="input-1"
                            required
                            placeholder="Username"
                    ></b-form-input>
                </b-form-group>
                <b-form-group id="input-group-2">
                    <b-form-input
                            id="input-2"
                            type="password"
                            required
                            placeholder="Password"
                    ></b-form-input>
                </b-form-group>
                <div class="btn">
                    <b-button variant="primary" >Login</b-button>
                    <b-button variant="success" @click="$router.push('/register')">Register</b-button>
                </div>
            </b-card>
        </div>

    </div>
</template>

<script>
    export default {}
</script>

<style scoped>
    .container-fluid {
        background-color: green;
        height: 100%;
    }

    .my-form {
        display: block;
        margin-top: 120px;
        margin-bottom: 120px;
    }

    .box {
        padding: 10px;
        margin-bottom: 20px;
    }

    .btn {
        margin: 5px;
    }
</style>

我的错误是什么？不久前我尝试使用 flex，但不明白为什么它总是适合自己的内容。

顺便说一句对不起我的英语不好。

谢谢

【问题讨论】：

尝试使用height:100vh; 而不是height: 100%; 并使用text-align: left 设置h1 的样式，这是一个带有这两个更改的jsfiddle：jsfiddle.net/rwone/520g1Ldo - 编辑：我还没有研究过引导程序vue，但它可能已经有可用于 100vh 等的类。这个答案在引导程序 4 中提到了类似的东西，即 h-100 类：stackoverflow.com/a/44985360，另见：getbootstrap.com/docs/4.0/utilities/sizing
太好了，我也刚看到这个：getbootstrap.com/docs/4.3/utilities/sizing/…，在那个版本的引导程序中代表100vh的类似乎是vh-100。
我会调查一下，感谢您提供的这个好资源！

标签： css vue.js bootstrap-vue

【解决方案1】：

只要写在你的body标签里就可以解决你的问题

bgcolor="green"

【讨论】：

【解决方案2】：

使用 CSS 更改背景颜色，并确保正文（文档）至少为视口高度的 100%：

body {
  background-color: green;
  min-height: 100vh;
}

要将“CRUD”左对齐，请使用 Bootstrap 实用程序类“text-left”：

<h1 class="text-left">CRUD</h1>

https://getbootstrap.com/docs/4.3/utilities/text/

https://bootstrap-vue.js.org/docs/reference/utility-classes

【讨论】：