Question

我使用html5和css创建了简单的网页。

我创建了4个粘贴页脚，每列都有垂直导航菜单。

这是我的代码：

<footer>

<div id="footer">
<div class="footer-column" id="footer_column1">
Home
</div>
  <div class="footer-column" id="footer_column2"> 
about us 

</div>
  <div class="footer-column" id="footer_column3">
contact us
</div>
  <div class="footer-column" id="footer_column4">
Blogs  

</div>

</div>
</footer>

这是针对css：

  #footer {
   position:absolute;
   clear:both;
   bottom:0;
   color:#000;
   width:100%;
    height: 50px;
   background:#fff;
   left:0;

}
.footer-column {
  float: left; /* Push the div as far up-left as it can be put */
  width: 25%; /* Make sure to subtract the padding */
  padding: 10px; /* We want padding on all sides to make things look nice */
  text-align:center;
}

现在页面如下：s22.postimg.org/l0l6y85o1/Untitled_1_copy.png

如果我增加页脚的高度，它将隐藏幻灯片的背景。

任何人都可以帮助我，如何解决这个问题。提前谢谢。

Answer 1

你已经给了页脚绝对的位置，所以它会留在那里，现在你的页面基本上重叠了它。您应该为页面使用相对布局。

我建议您使用 bootstrap 。这是一个简单的example或this。

关于z-index - 如果你给你的页脚提供更高的z-index说999999那么它将在顶部（高于页面上的其他元素）。

Z-index实际上不会帮助你定位。永远都会隐藏某些东西。如果您希望页脚位于页面底部，则不要使用绝对定位，它将被按下。

尝试：

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 100px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 100px;

}

html5中粘性页脚内容的问题

1 个答案: