css - 用背景颜色完全填充页面

问题描述

如何将绿色延伸到底部？我怎样才能把 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，但不明白为什么它总是适合自己的内容。

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

谢谢

标签： cssvue.jsbootstrap-vue

css - 用背景颜色完全填充页面

问题描述

解决方案

推荐阅读