CSS issue with footers - css

Question

So I have this straight forward page:
<div class="page-wrapper">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">The content goes here</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>
And I have this CSS to make the footer stick to the bottom of the page:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
}
.page-wrapper {
min-height: 100%;
margin-bottom: -340px;
&:after {
content: "";
display: block;
height: 340px;
}
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
And for illustation purposes, here is a codepen.
Now, this was all working fine, but my client has asked for a second footer, but this time it doesn't appear on all pages and it has to be within the .page wrapper.
Here is a codepen to illustrate this.
As you can see, the second footer has no way of attaching to the bottom of the page (above the main footer). I have tried lots of things like flexbox and absolute positioning, but I just can't get it to work.
Can anyone offer any solutions?
Once again, I need to point out that I can not change the location of the .view-footer.

Answer 1

If you want the following order:
Header
Content
view footer
footer
and you don't have a specific page length you need to have, you can just use regular divs (display: block) items to get everything one under another.
using blocks will allow you to make every element get the entire width of the screen, while every element appear below the previous one.
Here's a fixed version of your codepen.
If you want the footer to stick to the bottom of the content (lets say that the .page part of your site needs a certain fixed height), you can use absolute positioning only for the footer.
here's a codepen example for that :-)

Answer 2

I would use these settings on the footer:
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 340px;
And this to make sure nothing can be hidden under the footer (i.e. the full page content can be scrolled up from behind the footer):
.page { margin-bottom: 340px; }
This would include that second footer being scrolled up. If it also needs to be sticky above the first footer, give it also position fixed, plus bottom: 340px, and increase the bottom margin on the content accordingly.

Answer 3

So, If I get this right, You want a page that if the content is shorter than the viewport, then the footer sticks to the bottom. And in some pages, you have an additional footer, that has to stick above the original footer but it is not directly before it in the DOM, it is inside the element before it.
If your footers have a fixed height, then things are not so tough. In the first step, you have to set the .page-wrapper min-height to calc(100% - page-footer-height) which means:
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
That solves the sticky .page_footer problem.
Now, since the bottom of .page-wrapper will always be touching the top of .page-footer you can just place your .view-footer on it's bottom with position-absolute which, unfortunately, will hide the content of .page.
At this point, you have two options, either you add an additional element after the .view-footer as a placeholder to simulate the space, or you have to add a modifier class to the.page or some parent element to add a padding-bottom equal to .view-footer height. Since you have control of the server side code, I suppose that at least one of the options is possible.
Placeholder Version:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
background-color: pink;
}
.view-footer {
background-color: #dcdcdc;
border-top: 1px solid #adadad;
margin: 20px 0 -20px 0;
padding: 50px 0;
position: absolute;
width: 100%;
bottom: 0;
}
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
.view-footer + .empty {
height: 120px;
}
<div class="page-wrapper">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">
The content goes here
<div class="view-footer">I have no control where this appears in the html</div>
<div class="empty"></div>
</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>
Modifier class Version:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
background-color: pink;
}
.extra-footer .page {
padding-bottom: 120px;
}
.view-footer {
background-color: #dcdcdc;
border-top: 1px solid #adadad;
margin: 20px 0 -20px 0;
padding: 50px 0;
position: absolute;
width: 100%;
bottom: 0;
}
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
<div class="page-wrapper extra-footer">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">
The content goes here
<div class="view-footer">I have no control where this appears in the html</div>
</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>