Question

我非常抱歉，但我已经“玩得开心”，有很多随机的粘性页脚解决方案，我已经慢慢开始思考自杀了。好的！所以我知道这个解决方案：http://ryanfait.com/sticky-footer/但我不知道如何让它与另一个包含页脚的容器一起工作。

* {
  margin: 0;
}
html,
body {
  height: 100%;
}
#container {
  margin: 0 auto;
  max-width: 1200px;
}
.content {
  background-color: #C33C54;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer,
.push {
  height: 4em;
}
.footer {
  background-color: #254E70;
}

<html>

<head>
  <link rel="stylesheet" href="layout.css" ... />
</head>

<body>
  <div id="container">
    <div class="wrapper">
      <header>HEADER</header>
      <div class="content">
        <p>Your website content here.
          <p>
      </div>
      <div class="push"></div>
    </div>
    <div class="footer">
      <p>Copyright (c)</p>
    </div>
  </div>
</body>

</html>

请帮帮忙？这是我设计中唯一剩下的东西，我今天必须完成。谢谢！

Answer 1

你需要给容器100％的高度。

html,
body,
#container {
    height: 100%;
}

粘性页脚与站点长的容器

1 个答案: