时间戳

首页 > 解决方案 > 页脚覆盖网站元素

html - 页脚覆盖网站元素

问题描述

我最近重新设计了我的网站，这是我第一次使用页眉和页脚元素。在某些页面上，页脚将覆盖元素。有哪些不错的解决方案？midi 页面底部的示例

页脚 HTML 代码：

<footer style="position: fixed;">
    <a href="index.html">Back</a>
</footer>

页脚 CSS：

footer {
  margin-top: 5px;
  background-color: #000099;
  padding: 10px;
  clear: both;
  width: 100%;
  color: white;
  font-size: 20px;
  text-align: center;
  bottom: 0;
  left: 0;
  right: 0;
}

谢谢，海伦。（这是我第一次使用堆栈溢出来提问，所以如果我弄错了请不要打我哈哈）

标签： htmlcss

解决方案

您可以像这样简单地为页面中的最后一个元素添加样式；style="margin-bottom: 50px;"例如对于您的midi.html页面。

<audio controls="" style="margin-bottom: 50px;">
您的浏览器不支持音频标签。`

或者您也可以通过添加 .ie 来解决margin-bottom: 50px;这个body问题

body {
background-color: #1d41e2;
text-align: center;
font-family: "Helvetica";
margin-bottom: 50px;
}

推荐阅读