英文:
How do I ensure the footer is always at the bottom of the page?
问题
我需要我的页脚元素始终位于页面底部（而不是窗口底部） - 我的页面内容有些很少，有些需要滚动才能看到。
要么我的页脚在具有大量内容的页面上位置正确（即必须滚动才能看到它），但在其他页面上在窗口中间，要么它一直位于窗口底部（而不是页面底部）[保持原样]，要么它在每个页面上覆盖页眉[我的flexbox尝试]。
这是我的每个页面的HTML结构：
<html>
<body>
<div class="content"></div>
<div class="spacer"></div>
<footer></footer>
</body>
</html>
以下是相关的CSS [带有我的flexbox尝试]：
body {
margin: 0;
padding-left: 100px;
padding-right: 100px;
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
background-color: lightblue;
overflow: hidden;
width: 100%;
float: right;
position: absolute;
padding-left: 100px;
left: 0;
right: 0;
z-index: 1;
height: 75px;
border-top: black 1px;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
border-style: solid;
font-size: 75%;
}
.spacer {
flex: 1 0 auto;
}
正如我所说，当前的代码使页脚在每个页面上都覆盖页眉。将"bottom: 0;"添加到页脚元素会将其移到大多数页面的正确位置，但在较大的页面上仅位于窗口底部，因此在滚动时会位于中间。从body元素中删除"display: flex; flex-direction: column; min-height: 100vh;"以及从.spacer元素中删除"flex: 1 0 auto;"会使其在具有大量内容的页面上放置正确，但在较小的页面上放置不正确。我已经尝试过粘性页脚，但它们不起作用。我尝试了这里的多种其他解决方案，但似乎都不起作用。
我明白这可能有点难以理解，但希望我已经解释得足够清楚。
英文:
I need my footer element to always be located at the bottom of the page (not window) – I have pages with very little content, and some with content that needs scrolling.
Either my footer is in the correct place on the page with lots of content (i.e, you have to scroll to see it) but then in the middle of the window on other pages, or it's at the bottom of the window (not page) for everything [leaving it as is], or it's covering the header on every page [my flexbox attempt].
Here is how each of my pages are structured in HTML:
<html>
<body>
<div class = "content"></div>
<div class = "spacer"></div>
<footer></footer>
</body>
</html>
and here is the relevant CSS [with my flexbox attempt]
body {
margin: 0;
padding-left:100px;
padding-right:100px;
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
background-color: lightblue;
overflow: hidden;
width: 100%;
float: right;
position: absolute;
padding-left: 100px;
left: 0;
right: 0;
z-index: 1;
height: 75px;
border-top: black 1px;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
border-style: solid;
font-size: 75%;
}
.spacer {
flex: 1 0 auto;
}
As I said, this current code makes the footer cover the header on every page. Adding "bottom: 0;" to the footer element moves it to the correct location for most pages, but only at the bottom of the window for the larger pages, so in the middle when I scroll. Removing the "display: flex; flex-direction: column; min-height: 100vh;" in the body element, and the "flex: 1 0 auto;" from the .spacer element places it correctly on the pages with lots of content, but incorrectly on the smaller ones. I've tried sticky footers, and they don't work. I've tried multiple other solutions on here but none seem to work.
I appreciate this might be hard to follow but I hope I've explained it well enough.
答案1
得分: 1
这是因为您在 footer 上使用了 position: absolute;。这样，footer 将相对于最近的相对父元素进行定位。因此，只需最近的元素之一具有 position: relative，footer 的位置将相对于该元素。
由于您想要对 body 内容应用填充，您应该使用
最佳解决方案是在 footer 上使用 position: relative;，在 main 中使用 min-height: calc(100vh - <footbar 高度>);。这样，main 的高度将将 footbar 向下推。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
main {
display: flex;
flex-direction: column;
padding-left: 100px;
padding-right: 100px;
min-height: calc(100vh - 75px);
}
footer {
background-color: lightblue;
overflow: hidden;
width: 100%;
float: right;
position: relative;
padding-left: 100px;
z-index: 1;
height: 75px;
border-top: 1px solid black;
border-bottom: 0;
border-left: 0;
border-right: 0;
border-style: solid;
font-size: 75%;
}
.spacer {
flex: 1 0 auto;
}
<html>
<body>
<main>
<div class="content"></div>
<div class="spacer"></div>
</main>
<footer>
</footer>
</body>
</html>
英文:
This is because you are using position: absolute; on the footer. In this way the footer will be positioned relative to the closest relative parent. In this way it is sufficient that one of the closest elements is position: relative and the position of the footer will therefore be relative to that element.
Since you want to apply padding to the content of the body, you should use the <main> tag and apply the padding to it.
The best solution would be to use position: relative; on the footer and min-height: calc(100vh - <footbar height>); in the main. This way the height of the main will pushes the footbar down.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
main {
display: flex;
flex-direction: column;
padding-left:100px;
padding-right:100px;
min-height: calc(100vh - 75px);
}
footer {
background-color: lightblue;
overflow: hidden;
width: 100%;
float: right;
position: relative;
padding-left: 100px;
z-index: 1;
height: 75px;
border-top: black 1px;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
border-style: solid;
font-size: 75%;
}
.spacer {
flex: 1 0 auto;
}
<!-- language: lang-html -->
<html>
<body>
<main>
<div class = "content"></div>
<div class = "spacer"></div>
</main>
<footer>
</footer>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论