Html 删除网页内容下方的空白

因此，我对Web开发相对较新，并且正在学习Colt Steele的udemy课程，我开始做这个登录页，但在接近尾声时，我尝试将HTML的高度设置为100%，然后出现空白。我试图寻找一个原因，我认为我的div容器的高度导致了一些问题

附言：我也试着让HTML的高度自动调整，效果很好，但在响应模式下会再次出现问题，甚至导航栏的大小也会减小，无法覆盖到屏幕的最后

正文{
背景：url(https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=748&q=80）；
背景尺寸：封面；
背景位置：中心；
字体系列：“Lato”，无衬线；
颜色：白色；
背景重复：无重复；
边框：1px实心透明；
}
html{
高度：自动；
}
#内容{
文本对齐：居中；
填充：25%；
}
h1{
字号：700；
字号：5em；
}
人力资源部新闻1{
边框顶部：1px纯白；
}

完美匹配
唯一的人类猫约会应用程序

开始

您需要将

高度：100%

添加到

主体

和

html

中，以确保主体在窗口大小更改时动态更改

实时演示：（运行下面的代码片段，然后单击全屏查看页面中的图像，并且没有空白。）

Edit:Bootstrap有自己的

许多本地
flex-box
类
，您可以使用这些类来代替自定义CSS。我们可以使用
align items center
和
h-100
来确保内容文本保持在中间，好的东西它也会重复。我们不需要在内容上使用任何自定义CSS
padding
或
margin


正文{
背景：url(https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=748&q=80）；
背景尺寸：封面；
背景位置：中心；
字体系列：“Lato”，无衬线；
颜色：白色；
背景重复：无重复；
边框：1px实心透明；
身高：100%；
}
html{
身高：100%；
}
主体{}
#内容{
文本对齐：居中；
颜色：白色；
}
h1{
字号：700；
字号：5em；
}
人力资源部新闻1{
边框顶部：1px纯白；
}

完美匹配














完美匹配
唯一的人类猫约会应用程序

开始
@Alwayshipping我上传了一张关于这个问题的图片。请参阅下面我的答案。如果我已经解决了你的问题，你会介意并投赞成票吗。谢谢我想知道你的起始标签在哪里P@gpl这里没有使用表单。那么第二个
标签（包括登录和注册）中的
之后会发生什么？从这个结束标记弹出的地方？出于某种原因，我认为我的这个问题与浏览器有关，我尝试了Chrome和Firefox，其中我仍然看到一些空白，但在Microsoft EDGE中我没有看到任何空白。@ChrisM我已经测试了
Firefox
和
Chrome
-它工作得很好。您可能需要将您的
chrome
更新到最新版本，这可能会有所帮助。我甚至不使用MicrosoftEGDE。让我知道我更新了我的Chrome，但这个空白仍然存在：（@ChrisM Wao。那里发生了一些事情。我将在我的回答中添加我的Chrome视图的图像。你能
运行上面的代码片段
，然后单击右边的全屏并检查你在那里看到了什么吗？@ChrisM这是我的Chrome视图：