html5中粘滞页脚内容的问题 [英] Issue in sticky footer content in html5

问题描述

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

I have created simple webpage using html5 and css.

我已经创建了带有4列的粘性页脚，每列都有垂直导航菜单。

I have created sticky footer with 4 columns and each column have vertical navigation menu.

这是我的代码：

<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

Now page looks like : s22.postimg.org/l0l6y85o1/Untitled_1_copy.png

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

If i increase the height of footer, it will be hidden background of slideshow.

，如何解决这个问题。提前感谢。

Can anyone help me, how to fix this. Thanks in advance.

推荐答案

您已为页脚设置了绝对定位，因此它将保留在那里，现在您的页面基本上重叠。您应该使用页面的相对布局。

You have given absolute positioning to footer so it will stay there, now your page is basically overlapping it. You should use relative layout for your page.

我建议您使用 bootstrap 。以下是一个简单的示例或此。

I would suggest you to use bootstrap for this. Here is a simple example or this.

关于z-index 给你的页脚给出较高的z-index，说999999，那么它会在顶部（高于页面上的其他元素）。

Regarding z-index - If you will give higher z-index to your footer say 999999 then it will be on top (higher than other elements on page).

Z-index实际上不会帮助您进行定位。总是有东西会被隐藏。如果您希望页尾位于页面底部，则不要使用绝对定位，而是将其向下推。

Z-index will not actually help you with positioning. Always something will be hidden. If you want your footer to be right at bottom of the page then do not use absolute positioning and it will be pushed down.

尝试：

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中粘滞页脚内容的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！