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

Question

我正在尝试将此设计 ( http://revivelab.com/demo_sites/bookthatcondo/) 变成一个 wordpress 主题，您会注意到页脚有“position:absolute;bottom:0;top:1500px;”在上面。 1500px 是我需要更改的，因为我不想指定每个页面唯一的顶部位置。它上面的 div 是绝对的，因此它们可以分层以获得波浪/ slider 效果。

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

Answer 1

好的，所以我找到了一种方法...它可能有点困惑，但它有效:

你需要找到id为canvas的div .用给定新 id(即 canvas2)的新 div 包装该 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;
}

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