html - 防止我的固定页脚重叠内容
问题描述
我有以下代码来创建我的固定页脚:(类似于https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_footer)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<p>The footer is placed at the bottom of the page.</p>
.....
<p>The footer is placed at the bottom of the page.</p>
<p>The footer is placed at the bottom of the page.</p>
<p>The footer is placed at the bottom of the page.</p>
<p>The footer is placed at the bottom of the page.</p>
<p>The footer is placed at the bottom of the page.</p>
<p>N-2 element</p>
<p>N-1 element</p>
<p>N element</p>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
固定属性运行良好,但我没有看到我的最后一行。页脚与它重叠:
我怎样才能避免它?
解决方案
您需要为页脚添加高度,然后添加 padding-bottom: footerHeightpx; 到 body 元素
body {
padding-bottom: footerHeightHere
}
推荐阅读
- django - 在 Django 管理员中漂亮地打印 django.db.models.JSONField?
- excel - 删除 LastRow 到 LastRow
- flutter - 没有为“用户”类型颤振火库定义方法“then”
- java - DBUnit 数据集 - 插入 UTC 时间戳
- java - Apache Ignite H2 调试控制台无法启动
- c# - 在 Xamarin Android 中的画布中滑动
- python - 当每个值都是列表时,添加数据框列的值的长度
- python - DataFrame.to_csv() 在传递压缩参数时表现不同
- spring - Springboot JPA(Hibernate)没有按名称获取表和列
- python - Python猜2个数字游戏