Question

我的基本布局很简单：

<header></header>
<main></main>
<footer></footer>

如果我制作我的页脚position:fixed，它确实停留在页面的底部，但是在需要滚动时是一个“粘性”页脚和覆盖的内容。

我想将页脚保持在底部，但不是fixed。

这甚至可以用纯css吗？

Fiddle

Answer 1

如今，flex或grid可以轻松完成：

网格：

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

body>* {
  padding: 0.5em;
  border: solid;
  margin: 2px;
}


/* does it push footer down  if  too tall  */

main:hover {
  padding-bottom: 100%;
}

<header>header</header>
<main>main</main>
<footer>footer</footer>

flex

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-flow: column;
}

main {
  flex-grow: 1;
}

body>* {
  padding: 0.5em;
  border: solid;
  margin: 2px;
}

/* does it push footer down if too tall  */

main:hover {
  padding-bottom: 100%;
}

<header>header</header>
<main>main</main>
<footer>footer</footer>

以及任何好奇或热爱过往display:table/table-row 的人（仅在您的浏览器不支持显示并且不知道页脚大小的情况下使用）：

body {
  margin: 0;
  height: 100vh;
  width: 100%;
  table-layout: fixed;
  display: table;
  border-spacing: 2px;
}

header > div,
footer > div {
  height: 0; /* will grow like a table*/
}

body>* {
  display: table-row;
}

body>*>div {
  display: table-cell;
  padding: 0.5em;
  border: solid;
  margin: 2px;
}

/* does it push footer down  if  too tall  */

main:hover > div {
  padding-bottom: 100%;
}

<header>
  <div>header</div>
</header>
<main>
  <div>main</div>
</main>
<footer>
  <div>footer</div>
</footer>

Answer 2

使用代码的最简单方法是移动标记并移除位置：从CSS代码修复。

<header></header>
<main><footer></footer></main>

并在你的CSS中：

footer {
    background: grey;
    bottom: 0;
    width: 100%;
    padding: 20px;
}

Answer 3

轻松，改变这些：

body {
    position: relative;
}
footer {
    position:absolute;
    background-color: grey;
    bottom:0;
    width: calc(100% - 40px);
    padding: 20px;
}

以下是FIDLLE

Answer 4

有position:absolute;。这是一个CSS属性，允许您控制任何元素的确切位置。例如：

<style>
footer {
position:absolute;
top:(numberofuntits)px;
left: (numberofUnits)px;
}

</style>

这使得无论页面发生了什么，它都会保留到位，有点像固定只是更具体。虽然我认为你真正需要的是position:relative;所以它相对于页面上的其他元素调整页脚。为了加入这一点，我添加了一些你可能想要考虑添加的其他有用的样式......（在www.w3schools.com上找到这些）我希望这是你需要的：

 <style>
footer {
    clear: both; //prevents floating elements from right/left of footer
    position: relative; //Positions footer relative to other elements on hte page
    z-index: 1; //z-index positions elements in front or behind eachother, most have a //natual z-index of -1
    height: -3em; //exactly what it says...
    margin-top: 40em; //moves footer to bottom of all elements
}
</style>

希望这有帮助！

将页脚保持在底部但不粘？

4 个答案: