保持页脚在底部，但不粘？ [英] Keep footer at bottom but not sticky?

问题描述

我的基本布局很简单：

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

如果我使我的页脚 position：fixed 它保留在页面的底部，但是是一个粘性页脚和覆盖的内容，当需要滚动时。

If I make my footer position:fixed it does stay at the bottom of the page, but is a "sticky" footer and covered content when scrolling is needed.

我想将页脚保留在底部，但不要固定。

I would like to keep the footer at the bottom, but not be fixed.

这是否可能与纯css有关？

Is this even possible to do with pure css?

小提琴

推荐答案

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

There is position:absolute;. This Is a CSS property that allows you to control the exact location of any element. For example:

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

</style>

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

This makes it so no matter what happens to the page, it stays in place, kinda like fixed only more specific. Though I think what you will really need is position:relative; So it adjusts the footer relative to other elements on the page. To incorporate that, I've added some other useful styles you might want to consider adding... (found these on www.w3schools.com) I hope this is what you need:

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

希望这有帮助！

这篇关于保持页脚在底部，但不粘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！