Html CSS：页脚重叠内容，其他故障
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18990675/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Footer overlapping content, other glitches
提问by Flawedspirit
I've looked around for similar issues here and in other places, but I can't seem to find a definitive answer. When I add enough text to a page that it would get to the footer, the footer simply overlaps the text. Same thing if I reduce the size of the browser window to force the footer and the container that holds the content to meet. Occasionally, this also manifests in the "container" aka the lighter gray part, shrinking for some reason, even though it should always be taking up 100% of the height.
我在这里和其他地方寻找过类似的问题，但似乎找不到明确的答案。当我向页面添加足够多的文本以到达页脚时，页脚只是与文本重叠。如果我减小浏览器窗口的大小以强制页脚和包含内容的容器相遇，那么同样的事情。有时，这也体现在“容器”中，即较浅的灰色部分，由于某种原因而缩小，即使它应该始终占据 100% 的高度。
This is the sort of stuff that keeps me up all night, so I'm not thinking very clearly. I'm sure it's something stupid and easy to fix, but I'm not a professional designer and am certainly missing what the issue is.
这是那种让我彻夜难眠的东西，所以我不是很清楚。我敢肯定这是愚蠢且易于修复的事情，但我不是专业设计师，并且肯定会错过问题所在。
Below is my CSS, and a JSFiddle that I made with all the relevant parts of a page.
下面是我的 CSS，以及我用页面的所有相关部分制作的 JSFiddle。
html, body {
margin: 0;
padding: 0;
}
html, body {
background: #252525;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
text-align: center;
}
body {
background: #363636;
border-left: 1px solid #111;
border-right: 1px solid #111;
margin: 0 22.5%;
}
#container {
color: white;
margin-bottom: 2em;
min-height: 100%;
overflow: auto;
padding: 0 2em;
text-align: justify;
}
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: fixed;
font-size: small;
width:100%;
}
采纳答案by Sagar Guhe
回答by Scott Weaver
Anyone stumbling upon this in 2017 should know that a great option was invented to alleviate layout headaches such as this, flexbox.
任何在 2017 年遇到此问题的人都应该知道，发明了一个很好的选择来缓解布局问题，例如flexbox。
Essentially, all you have to do is set <body>to:
基本上，您所要做的就是设置<body>：
body {
display: flex;
flex-direction: column;
align-items: center;
}
Then apply flex:1 1 autoto the "main" or middle section, in this case #container, which will make it expand vertically to fill available space, assuring the footer will stick to the bottom:
然后应用于flex:1 1 auto“主要”或中间部分，在这种情况下#container，这将使其垂直扩展以填充可用空间，确保页脚将粘在底部：
#container {
flex: 1 1 auto; /*grow vertically*/
}
We added align-items:centerin the flex parent to handle cross-axis centering (in our case, horizontal).
我们添加align-items:center了 flex 父级来处理跨轴居中（在我们的例子中，水平）。
Here is an example snippet of the above:
这是上面的示例片段：
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #252525;
border-left: 1px solid #111;
border-right: 1px solid #111;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
#container {
color: white;
background: #363636;
padding: 2em;
background: #363636;
flex: 1 1 auto;
/*grow vertically*/
width: 55%;
text-align: center;
}
#footer {
color: #707070;
height: 2em;
font-size: small;
}<body>
<div id="container">
<h1>A webpage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius
nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.</p>
<p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat
libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</p>
</div>
<div id="footer">This is a footer.</div>
</body>回答by NikeshPathania
回答by Amol Impal
First write this code
先写这段代码
footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:fixed;
left:0;
bottom:0;
width:100%;
}
}
and now set media queries
现在设置媒体查询
@media only screen and (max-width: 767px){
footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:static;
left:0;
bottom:0;
width:100%;
} }
} }
hope this will help you :)
希望能帮到你 ：）
回答by Sylhare
I believe you were looking for a sticky footer that stays while not being fixed to the bottom of the page (so no overlap). I wanted to add this answer because to me (it worked) and it's closer to what I was looking for.
我相信您正在寻找一个粘性页脚，该页脚不会固定在页面底部（因此不会重叠）。我想添加这个答案，因为对我来说（它有效）并且它更接近我想要的。
Solution
解决方案
The solution comes from Chris Braccoand I am going to detail what you need to reproduce the effect:
解决方案来自Chris Bracco，我将详细说明重现效果所需的内容：
HTML
HTML
Your HTML be like:
你的 HTML 是这样的：
<html>
<body class="body-for-sticky">
<...> your content </...>
<div class="footer sticky-footer"> your footer </div>
</body>
</html>
CSS
CSS
You will need to add in your css something like:
您需要在 css 中添加如下内容：
html {
height: 100%; /* for the page to take full window height */
box-sizing: border-box; /* to have the footer displayed at the bottom of the page without scrolling */
}
*,
*:before,
*:after {
box-sizing: inherit; /* enable the "border-box effect" everywhere */
}
.body-for-sticky {
position: relative; /* for the footer to move with the page size */
min-height: 100%; /* for the footer to be at the bottom */
padding-bottom: 6rem; /* Space available between last element and bottom border of the page */
}
.sticky-footer {
position: absolute; /* for it to disappear under last body element */
bottom: 0; /* so the footer can stick to the bottom*/
}
Example
例子
That's like the basic you need to create the sticky footer. Here is an example (with some more CSS for better rendering).
这就像创建粘性页脚所需的基本知识。这是一个示例（使用更多 CSS 以获得更好的渲染效果）。
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.body-for-sticky {
position: relative;
min-height: 100%;
padding-bottom: 6rem;
}
.sticky-footer {
position: absolute;
bottom: 0;
}
/* for the rendering */
body {
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
right: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky footer</title>
<style> </style>
</head>
<body class="body-for-sticky">
<div class="demo">
<h1 style="margin-top: 0">CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user's viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer's parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
<p> Source <a href="https://chrisbracco.com/css-sticky-footer-effect" />Chris Bracco</a>.</p>
</div>
<div class="footer sticky-footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
</body>
</html>Expand the snippet and watch the result full size to see how it works.
展开代码段并查看完整大小的结果以了解其工作原理。
回答by Reza Rouf
#footer {
z-index: 1;
position: absolute;
right: 0;
bottom: 0;
left: -25%;
padding: 1rem;
background-color: black;
text-align: center;
height: 3em;
left: 0;
font-size: small;
width:100%;
}
