粘性页脚重叠；所有 css 都失败了
Sticky Footer overlapping; all css is failing
我有一个很棒的页脚，直到我通过 blog div 使用 article div 扩展而不是包含内部滚动功能来简化我的设计.现在，无论我使用什么形式的 CSS，页脚都不会粘在页面底部。
如果您在 blog div 或 article div 中包含大量文本，则页脚将简单地覆盖 article/blog 文本，从而扩展到页面底部。我知道这是一个常见问题，但我已经用尽了之前帖子中讨论的技巧，其中 none 似乎有效。另外，我可能会补充说，我的编码通常没有这个问题。因此，这是一项艰巨的工作，目的是看看新鲜的眼睛是否能找到问题所在。下面的编码是我为完成这项工作所做的最新尝试。
任何帮助是极大的赞赏。这可能是一个小错误，但我只是没有看到它。如果你能让它工作，那就太好了！提前致谢。
body {
overflow-y: scroll;
border: none;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#container {
border: none;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background: none;
position: absolute;
float: left;
}
img {
position: static;
float: left;
height: 100%;
margin: 0;
padding: 0;
width: auto;
}
#leftcontainer {
position: fixed;
float: left;
height: 100vh;
width: 20vh;
padding: 0;
background: none;
margin: 0;
overflow: hidden;
border: none;
}
#rightcontainer {
position: absolute;
float: left;
height: 100%;
width: calc(100% - 20vh);
margin: 0;
margin-left: 20vh;
padding: 0;
padding-bottom: -10%;
background: pink;
}
#article {
positon: absolute;
float: left;
width: 50%;
margin: 0;
padding: 0;
background-color: blue;
}
#blog {
position: absolute;
float: left;
width: 50% margin: 0;
padding: 0;
background-color: red;
margin-left: 50%;
}
#footer {
position: relative;
height: 10%;
background-color: gray;
width: calc(100% - 20vh);
margin-top: 100%;
margin-bottom: 0;
margin-left: 20vh;
padding: 0;
}
<body>
<div id="container">
<div id="leftcontainer">
</div>
<div id="rightcontainer">
<div id="article"></div>
<div id="blog"></div>
</div>
<div id="footer"></div>
</div>
</body>
试试这个：
https://jsfiddle.net/jsdu9h0f/3/body{
overflow-y: scroll;
border: none;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#container{
border: none;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background: none;
position: relative;
float: left;
}
img {
position: static;
float: left;
height: 100%;
margin: 0;
padding: 0;
width: auto;
}
#leftcontainer {
position: fixed;
float:left;
height: 100vh;
width: 20vh;
padding: 0;
background: none;
margin: 0;
overflow: hidden;
border: none;
}
#rightcontainer {
float: left;
width: calc(100% - 20vh);
margin: 0;
margin-left: 20vh;
background: pink;
padding-bottom: 22%;
}
#article{
position: relative;
float: left;
width: 50%;
margin: 0;
padding: 0;
background-color: blue;
}
#blog{
position: relative;
float: left;
width: 50%;
margin: 0;
padding: 0;
background-color: red;
}
#footer {
height: 10%;
background-color: gray;
width: calc(100% - 20vh);
margin-bottom: 0;
margin-left: 20vh;
padding: 0;
position: absolute;
bottom: 0;
}
<body>
<div id="container">
<div id="leftcontainer">
</div>
<div id="rightcontainer">
<div id="article">I had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If
you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips
discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt
to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I had a great footer, until I simplified my design by making "blog" div extend
with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If you include a great deal of text, either in the "blog" div or the "article" div,
the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips discussed in previous posts, and none of them seemed to work. Also, I might add,
that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt to make this work. Any help is greatly appreciated. It may be a small error, but
I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no
matter what form of CSS I use, the footer will not stick to the bottom of my page. If you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom
of the page. I know this is a common problem, but I've already exhausted the tips discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort
to see if fresh eyes can find the problem. The coding below, is my latest attempt to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I
had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If
you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips
discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt
to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.</div>
<div id="blog">I had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If
you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips
discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt
to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I had a great footer, until I simplified my design by making "blog" div extend
with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If you include a great deal of text, either in the "blog" div or the "article" div,
the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips discussed in previous posts, and none of them seemed to work. Also, I might add,
that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt to make this work. Any help is greatly appreciated. It may be a small error, but
I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no
matter what form of CSS I use, the footer will not stick to the bottom of my page. If you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom
of the page. I know this is a common problem, but I've already exhausted the tips discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort
to see if fresh eyes can find the problem. The coding below, is my latest attempt to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.</div>
</div>
<div id="footer"></div>
</div>
</body>
已更新JSfiddle
使用 flexbox 检查此解决方案（避免使用 calc()）：
* {
box-sizing: boder-box;
padding: 0;
margin: 0;
}
html,
body {
overflow-y: scroll;
height: 100%;
width: 100%;
}
#container {
background: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
#leftcontainer {
width: 20vh;
background: none;
overflow: hidden;
}
#rightcontainer {
flex: 1;
display: flex;
flex-flow: row wrap;
background: pink;
border: 1px solid green;
}
#article {
width: 50%;
background-color: blue;
}
#blog {
width: 50%;
background-color: red;
}
#footer {
height: 10%;
background-color: gray;
align-self: flex-end;
margin-left: 20vh;
}
<body>
<div id="container">
<div id="leftcontainer">left container
</div>
<div id="rightcontainer">
<div id="article"><strong>Long stuff to test footer</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nemo, rerum neque. Rem blanditiis error, quo iste similique exercitationem pariatur quam, illum debitis ex distinctio, facere ratione
alias aliquid minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi nostrum facere esse atque illum eaque magni dolores deserunt aut reprehenderit excepturi a saepe dolor, consequuntur delectus doloremque unde explicabo quod!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Libero quibusdam accusantium architecto quis suscipit impedit quae quasi magnam sunt totam non voluptates, cum tempora ut aut eligendi molestiae ab aperiam. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Cum quibusdam quaerat, iusto natus nulla sequi nisi eveniet dolore, nobis veniam odio impedit maiores nihil vel. Debitis porro eius id similique.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quaerat hic
nemo, deleniti nulla officiis molestias, maiores rerum. Enim mollitia dolor facere ad modi ea voluptatem quia sapiente perferendis labore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque beatae excepturi, quis asperiores necessitatibus
iure explicabo veniam commodi assumenda? Laboriosam magni veniam quod reprehenderit neque magnam explicabo quia, quis, nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident blanditiis harum rerum magni fugiat sequi placeat
saepe maiores vel quisquam, nisi non beatae consequuntur, perferendis laboriosam odit ipsa reiciendis culpa?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet officiis voluptate labore ducimus. Sapiente adipisci ipsa, ratione aliquid
tenetur consequuntur nulla dignissimos excepturi nihil molestiae placeat libero? Soluta, beatae sint.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptates et vero mollitia eius, quia ipsa, quas accusantium laboriosam facilis
iure voluptatum a deserunt earum assumenda fugiat dignissimos consequuntur nulla.</div>
<div id="blog">blog</div>
</div>
</div>
<div id="footer">Footer</div>
</body>
我有一个很棒的页脚，直到我通过 blog div 使用 article div 扩展而不是包含内部滚动功能来简化我的设计.现在，无论我使用什么形式的 CSS，页脚都不会粘在页面底部。
如果您在 blog div 或 article div 中包含大量文本，则页脚将简单地覆盖 article/blog 文本，从而扩展到页面底部。我知道这是一个常见问题，但我已经用尽了之前帖子中讨论的技巧，其中 none 似乎有效。另外，我可能会补充说，我的编码通常没有这个问题。因此，这是一项艰巨的工作，目的是看看新鲜的眼睛是否能找到问题所在。下面的编码是我为完成这项工作所做的最新尝试。
任何帮助是极大的赞赏。这可能是一个小错误，但我只是没有看到它。如果你能让它工作，那就太好了！提前致谢。
body {
overflow-y: scroll;
border: none;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#container {
border: none;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background: none;
position: absolute;
float: left;
}
img {
position: static;
float: left;
height: 100%;
margin: 0;
padding: 0;
width: auto;
}
#leftcontainer {
position: fixed;
float: left;
height: 100vh;
width: 20vh;
padding: 0;
background: none;
margin: 0;
overflow: hidden;
border: none;
}
#rightcontainer {
position: absolute;
float: left;
height: 100%;
width: calc(100% - 20vh);
margin: 0;
margin-left: 20vh;
padding: 0;
padding-bottom: -10%;
background: pink;
}
#article {
positon: absolute;
float: left;
width: 50%;
margin: 0;
padding: 0;
background-color: blue;
}
#blog {
position: absolute;
float: left;
width: 50% margin: 0;
padding: 0;
background-color: red;
margin-left: 50%;
}
#footer {
position: relative;
height: 10%;
background-color: gray;
width: calc(100% - 20vh);
margin-top: 100%;
margin-bottom: 0;
margin-left: 20vh;
padding: 0;
}
<body>
<div id="container">
<div id="leftcontainer">
</div>
<div id="rightcontainer">
<div id="article"></div>
<div id="blog"></div>
</div>
<div id="footer"></div>
</div>
</body>
试试这个：
https://jsfiddle.net/jsdu9h0f/3/body{
overflow-y: scroll;
border: none;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#container{
border: none;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background: none;
position: relative;
float: left;
}
img {
position: static;
float: left;
height: 100%;
margin: 0;
padding: 0;
width: auto;
}
#leftcontainer {
position: fixed;
float:left;
height: 100vh;
width: 20vh;
padding: 0;
background: none;
margin: 0;
overflow: hidden;
border: none;
}
#rightcontainer {
float: left;
width: calc(100% - 20vh);
margin: 0;
margin-left: 20vh;
background: pink;
padding-bottom: 22%;
}
#article{
position: relative;
float: left;
width: 50%;
margin: 0;
padding: 0;
background-color: blue;
}
#blog{
position: relative;
float: left;
width: 50%;
margin: 0;
padding: 0;
background-color: red;
}
#footer {
height: 10%;
background-color: gray;
width: calc(100% - 20vh);
margin-bottom: 0;
margin-left: 20vh;
padding: 0;
position: absolute;
bottom: 0;
}
<body>
<div id="container">
<div id="leftcontainer">
</div>
<div id="rightcontainer">
<div id="article">I had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If
you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips
discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt
to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I had a great footer, until I simplified my design by making "blog" div extend
with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If you include a great deal of text, either in the "blog" div or the "article" div,
the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips discussed in previous posts, and none of them seemed to work. Also, I might add,
that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt to make this work. Any help is greatly appreciated. It may be a small error, but
I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no
matter what form of CSS I use, the footer will not stick to the bottom of my page. If you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom
of the page. I know this is a common problem, but I've already exhausted the tips discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort
to see if fresh eyes can find the problem. The coding below, is my latest attempt to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I
had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If
you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips
discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt
to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.</div>
<div id="blog">I had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If
you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips
discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt
to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I had a great footer, until I simplified my design by making "blog" div extend
with the "article" div, rather than contain an inner-scrolling feature. Now, no matter what form of CSS I use, the footer will not stick to the bottom of my page. If you include a great deal of text, either in the "blog" div or the "article" div,
the footer will simply overlap the article/blog text, which extends to the bottom of the page. I know this is a common problem, but I've already exhausted the tips discussed in previous posts, and none of them seemed to work. Also, I might add,
that I normally don't have this problem with my coding. So this is a ditch effort to see if fresh eyes can find the problem. The coding below, is my latest attempt to make this work. Any help is greatly appreciated. It may be a small error, but
I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.I had a great footer, until I simplified my design by making "blog" div extend with the "article" div, rather than contain an inner-scrolling feature. Now, no
matter what form of CSS I use, the footer will not stick to the bottom of my page. If you include a great deal of text, either in the "blog" div or the "article" div, the footer will simply overlap the article/blog text, which extends to the bottom
of the page. I know this is a common problem, but I've already exhausted the tips discussed in previous posts, and none of them seemed to work. Also, I might add, that I normally don't have this problem with my coding. So this is a ditch effort
to see if fresh eyes can find the problem. The coding below, is my latest attempt to make this work. Any help is greatly appreciated. It may be a small error, but I'm just not seeing it. If you can get it to work then good on you! Thanks in advance.</div>
</div>
<div id="footer"></div>
</div>
</body>
已更新JSfiddle
使用 flexbox 检查此解决方案（避免使用 calc()）：
* {
box-sizing: boder-box;
padding: 0;
margin: 0;
}
html,
body {
overflow-y: scroll;
height: 100%;
width: 100%;
}
#container {
background: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
#leftcontainer {
width: 20vh;
background: none;
overflow: hidden;
}
#rightcontainer {
flex: 1;
display: flex;
flex-flow: row wrap;
background: pink;
border: 1px solid green;
}
#article {
width: 50%;
background-color: blue;
}
#blog {
width: 50%;
background-color: red;
}
#footer {
height: 10%;
background-color: gray;
align-self: flex-end;
margin-left: 20vh;
}
<body>
<div id="container">
<div id="leftcontainer">left container
</div>
<div id="rightcontainer">
<div id="article"><strong>Long stuff to test footer</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nemo, rerum neque. Rem blanditiis error, quo iste similique exercitationem pariatur quam, illum debitis ex distinctio, facere ratione
alias aliquid minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi nostrum facere esse atque illum eaque magni dolores deserunt aut reprehenderit excepturi a saepe dolor, consequuntur delectus doloremque unde explicabo quod!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Libero quibusdam accusantium architecto quis suscipit impedit quae quasi magnam sunt totam non voluptates, cum tempora ut aut eligendi molestiae ab aperiam. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Cum quibusdam quaerat, iusto natus nulla sequi nisi eveniet dolore, nobis veniam odio impedit maiores nihil vel. Debitis porro eius id similique.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quaerat hic
nemo, deleniti nulla officiis molestias, maiores rerum. Enim mollitia dolor facere ad modi ea voluptatem quia sapiente perferendis labore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque beatae excepturi, quis asperiores necessitatibus
iure explicabo veniam commodi assumenda? Laboriosam magni veniam quod reprehenderit neque magnam explicabo quia, quis, nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident blanditiis harum rerum magni fugiat sequi placeat
saepe maiores vel quisquam, nisi non beatae consequuntur, perferendis laboriosam odit ipsa reiciendis culpa?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet officiis voluptate labore ducimus. Sapiente adipisci ipsa, ratione aliquid
tenetur consequuntur nulla dignissimos excepturi nihil molestiae placeat libero? Soluta, beatae sint.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptates et vero mollitia eius, quia ipsa, quas accusantium laboriosam facilis
iure voluptatum a deserunt earum assumenda fugiat dignissimos consequuntur nulla.</div>
<div id="blog">blog</div>
</div>
</div>
<div id="footer">Footer</div>
</body>