Question

我正在尝试将此设计（http://revivelab.com/demo_sites/bookthatcondo/）转换为wordpress主题，您会注意到页脚的位置：绝对;底部：0;顶部：1500px;'在上面。 1500px是我需要改变的，因为我不想指定每个页面都是唯一的顶部位置。它上面的div是绝对的，所以它们可以分层为波形/滑块效果。

有没有人对如何实现这一目标有任何建议或提示？我有在网站的其余部分使用绝对定位来实现这些“层”吗？

Answer 1

好的，所以我找到了一种方法来做到这一点......这可能有点令人困惑，但它确实有效：

您需要找到ID为canvas的div。用一个新的div（即canvas2）包装div中的所有内容（不是div本身）。那你应该有这样的东西：

<div id="canvas">
   <div id="canvas2">
     <!-- all the other code here -->
   </div>
</div>

有了这个之后，你需要把你的整个页脚放在<div id="canvas">你应该拥有的内容中

<div id="canvas">
   <div id="canvas2">
     <!-- all the other code here -->
   </div>
  <div style="<!--Your footer styles here -->">
   <!-- footer content here -->
  </div>
</div>

在您这样做之后，您的网站看起来会非常混乱。但那是因为我们需要移动一些css属性。

现在你的页脚正在使用inline styling，如下所示：

style="width:100%;height:269px; background-image:url(img/footer_Wave.png); background-position:50% 0%; background-repeat:no-repeat; position:absolute;bottom:0;top:1500px;"

如果要继续使用内联样式，只需将其更改为： style="width:100%;height:269px; background-image:url(img/footer_Wave.png); background-position:50% 0%; background-repeat:no-repeat; margin-top:50px"

接下来，您的#canvas div已应用这些样式：

#canvas {
 width: 1024px; 
 height: 1000px; 
 position: absolute; 
 z-index: 5000; 
 left: 50%; 
 margin-left: -512px;
}

将其更改为：

#canvas {
 width: 100%; 
 position: absolute; 
 z-index: 5000;
}

最后，给#canvas2这些样式：

#canvas2 {
 width: 1024px; 
 margin:auto;
}

这应该为每个页面修复它。它看起来像很多变化，但它实际上并不多。希望这有帮助

Answer 2

您绝对不必指定页面的长度，以便将页脚粘贴到底部。

请尝试使用Sticky Footer。它使用负margin-top，因此您需要知道的只是页脚高度，而不是实际页面的高度。如果你有很多不同的页面高度，它真的会有所帮助。

具有不同高度的绝对定位div的页脚？

2 个答案: