html - 如何删除页脚和页面底部之间的空白?
问题描述
我目前遇到一个问题。页脚和页面底部之间有一个间隙。我尝试过但没有成功的一些信息和事情:
- body 和 html 有 0 边距和 0 填充
- 改变身体的大小
- 试图改变页脚的位置
- 可能还有其他一些事情,但已经忘记了
继承人的代码:
HTML
<body>
<section>
<div class="section1">
...
</div>
</section>
<footer>
...
</footer>
</body>
CSS
html, body, header, nav, section, footer{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Cairo', sans-serif;
scroll-behavior: smooth;
background-color: #ededed;
}
body{
position: relative;
}
section{
margin-top: 7.5rem;
display: flex;
align-items: center;
justify-content: center;
height: 880px;
}
footer{
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
display: flex;
justify-content: center;
height: 150px;
width: 100%;
background-color: #474747;
}
@media screen and (max-width:1024px){
section{
height: 1000px;
}
}
当页面在高度上松动时,页脚开始浮在其他东西上。这里有一些截图:
- http://prntscr.com/sof9op(正常)
- http://prntscr.com/sof9yl(将浏览器标签高度最小化一点)
- http://prntscr.com/sofa3b(将浏览器标签高度最小化了很多)
- http://prntscr.com/sofa76(从 Ipad Pro 查看)
- http://prntscr.com/sofaa2(从 Iphone X 查看)
这是我的第一个问题,所以我实际上不知道是否有人真的回答这个问题。但如果有人这样做,我将不胜感激。
解决方案
欢迎来到 StackOverflow!您是否尝试过删除我在这些行之间删除的代码?这可能会解决您的问题。
html, body, header, nav, section, footer {
scroll-behavior: smooth;
background-color: #ededed;
}
例子 :
/* html, body, header, nav, section, footer{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Cairo', sans-serif;
scroll-behavior: smooth;
background-color: #ededed;
} */
* { /* If you set the width height value for all elements, there will be problems. You can use this to remove all margin and padding values on the page. */
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
position: relative;
}
section {
margin-top: 7.5rem;
display: flex;
align-items: center;
justify-content: center;
height: 880px;
}
footer {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
height: 150px;
width: 100%;
background-color: #474747;
}
@media screen and (max-width:1024px) {
section {
height: 1000px;
}
}
<body>
<section>
<div class="section1">
Sections
</div>
</section>
<footer>
Footer Area
</footer>
</body>
推荐阅读
- time-series - 解释 auto.arima() 的输出
- ios - SwiftUI:NavigationView 中的 TextField 无法编辑
- android - Android Work Manager Retrofit libc:致命信号 11 Android 6
- python - 使用正则表达式组织电话号码
- python - 无法打开 Python:在 VScode 中选择解释器或 Jupyter 笔记本
- flutter - Flutter 布局、对齐、页面控制器,如何让 OnboardingScreen 只有一次?
- nativescript - 如何在 Visual Studio 应用中心构建我的 nativescript 应用程序
- python - 有没有办法在不移动或单击鼠标的情况下在 opencv 中获取鼠标位置?
- mongodb - 在 MongoDB 中加入特定值的集合
- delphi - Delphi 10.4 有没有为你的普通接口注册 typeinfo 的方法