为什么我的页面 div 没有填满整个屏幕？

Question

不幸的是，我在 CSS 和 HTML 上很糟糕，所以我不明白为什么我的页面看起来像这样：

如您所见，当整个背景应该是黑色时，却出现了所有空白。

CSS:

#page {
  height:100%;
  background-color:rgb(1, 0, 1);
}


.card {
  margin: 0 auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
  margin-top: 10px; /* Added */
}

HTML:

        <div id="page">
            <div class="container">
                <div class="row">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

我在这里使用 Bootstrap，这样我就可以使页面适合移动设备。只是因为某些原因没有锻炼

Answer 1

因为你的main身高不够。将父容器高度设置为 100vh。例如，我用 .main class 创建了一个父对象。像这样：

.main {
  height: 100vh;
}

#page {
  height:100%;
  background-color:rgb(1, 0, 1);
}

.card {
  margin: 0 auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
  margin-top: 10px; /* Added */
}

<div class="main">
    <div id="page">
        <div class="container">
            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

尝试为您的 body 标签设置 100vh 的高度。这样即使你添加其他 div 标签，整个屏幕仍然是黑色的。如果您只想让 #page div 填满整个屏幕，请将下面的代码应用于 #page div 本身。

body {
  height:100vh;
}

#page {
  height:100%;
  background-color:rgb(1, 0, 1);
}


.card {
  margin: 0 auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
  margin-top: 10px; /* Added */
}

        <div id="page">
            <div class="container">
                <div class="row">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

为什么我的页面 div 没有填满整个屏幕？

Why is my page div not filling up the entire screen?

html

css

grid-layout

bootstrap-4