Keep footer at the bottom when using absolute positioned main elements

Scenario

I am using a page layout with three main elements.

x1 central column

position:relative;
padding-right:300px;

x2 sidebar pieces on the right side

1-sidebartop

position:absolute;
top:0;
right:0;
height:250px;
width:300px;

2-sidebarbottom

position:absolute;
top:250px;
right:0;
width:300px;

HTML STRUCTURE

<div class="sidebartop"></div>
<div class="main"></div>
<div class="sidebarbottom"></div>

Why am I doing it this way?

Because I would like the sidebar to be fixed-width and let the central column take the rest of the horizontal available space.

But... why am I splitting the same sidebar in two pieces, instead of floating or inline-block aligning the two columns?

Because I want the upper side of the sidebar to stay before the main content on mobile devices, for which I just do position:relative; to all elements, so they flow into the desired mobile structure.

So what's the problem?

The sidebar structure makes it quite complex to keep the footer at the bottom. Right now I am using a javascript approach to reposition the footer on the fly. I am thinking about a clever way to achieve this with pure css.

You can see a JSFiddle here.

Thank you very much for taking your time.

Solution

You can (and almost certainly should) do this without absolute positioning.

Here's one float-based method that preserves your document order and doesn't depend on positioning or fixed heights for any element:

body, html {
  margin: 0; padding: 0;
}
* {
  box-sizing: border-box;
}
.topside,
.bottomside {
  width: 250px;
  float: right;
  clear: right;
  background-color: #FFC;
}
.main {
  width: calc(100vw - 250px); /* <-- This is the interesting bit */
  float: left;
  background-color: #FCF
}
.footer {
  clear: both;
  background-color: #CFF
}

<div class="topside">
  Sidebar Piece 1 [Stays before main on narrow screens]
</div>
<div class="main">
  MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS
  MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS MAIN CONTENTS

</div>
<div class="bottomside">
  Sidebar Piece 2
</div>
<div class="footer">
  Keep footer at bottom
</div>
</div>

(You could similarly use calc and vh to make your sidebar height match that of the main content area, but I believe this would require setting fixed heights on at least the footer and one half of the sidebar, as well as the header if any.)

Another possibility which I haven't worked out in detail yet: you could probably achieve the same effect by changing the document order to put both halves of your sidebar together (which would make your desktop layout much simpler to manage) and use flex-direction in your mobile layout to change the apparent order of the main and sidebartop blocks.