Question

这是我的问题，我使用的是具有粘性页脚的布局（使用cssstickyfooter.com方法）。在我的容器div中，我有一个内容div，其中有四个其他div。像这样：

<div class="container">
    <div class="content">
        <div id="1"></div>
        <div id="2"></div>
        <div id="3"></div>
        <div id="4"></div>
    </div>
</div>
<div class="footer"></div>

为了使粘性页脚正常工作，所有div都需要设置position:relative;，因为div将具有不同长度的内容，并且需要相应地重新调整大小。然而，我的困境开始的地方是我需要让div设置position:absolute;，这样它们就会叠加在一起，并且具有相同的（x，y）位置。

有没有办法达到我的需要？

Answer 1

我推荐Ryan Fait的粘性页脚，效果很好！

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  /* This line and the next line are not necessary unless you need IE6 support */
  height: 100%;
  margin: 0 auto -20px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 20px;
  /* .push must be the same height as .footer */
}

<body>
  <div class="wrapper">
    <p>Your website content here.</p>
    <div class="push"></div>
  </div>
  <div class="footer">
    <p>Copyright (c) 2008</p>
  </div>
</body>

Answer 2

我通常只使用以下内容将div“粘贴”到页面底部（或容器）：

.footer {position:absolute;bottom:0;left:0;}

将位置设置为绝对值后，它将独立于外部div及其位置/尺寸。

绝对定位和css粘性页脚

2 个答案: