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.
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>Try this:
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>Updated JSfiddle