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

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

不幸的是，我对 CSS 和 HTML 很不擅长，所以我不明白为什么我的页面是这样的：

如您所见，当整个背景应该是黑色时，所有的空白都存在。

CSS：

#page {
  height:100%;
  background-color:rgb(1,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，因此我可以使页面对移动设备友好。只是因为某种原因没有锻炼

解决方法

因为您的 ma​​in 缺乏高度。将父容器高度设置为 100vh。例如，我使用 g=df.explode('code').groupby('id')['code'].first().to_frame()#explode and pick first item in each group g['code']=g['code'].str.strip("''")#Proceed and strip the inverted comas from code 类创建了一个父级。像这样：

.main

.main {
  height: 100vh;
}

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

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

,

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

body {
  height:100vh;
}

#page {
  height:100%;
  background-color:rgb(1,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>