1

我试图把这个设计（http://revivelab.com/demo_sites/bookthatcondo/）变成一个wordpress主题，你会注意到页脚有'position：absolute；bottom：0；top：1500px；' 在上面。1500px 是我需要更改的，因为我不想指定每个页面唯一的顶部位置。它上面的 div 是绝对的，因此它们可以分层以获得波浪/滑块效果。

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

4

2 回答 2

1

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

您需要找到具有 id 的 div canvas。用给定新 id 的新 div 包装该 div 内的所有内容（而不是 div 本身）（即 canvas2）。那么你应该有这样的东西：

<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"

接下来，您的#canvasdiv 应用了以下样式：

#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;
}

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

于 2012-11-29T17:53:41.170 回答
0

您绝对不必指定您希望页面多长时间才能将页脚粘在底部。

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

于 2012-11-29T16:21:27.693 回答