Stacking elements in 2 responsive columns using only CSS - html

Question

The easiest way to understand what I want to achieve is in the attached image.
Essentially, I want to create a responsive layout comprising of 3 elements within a section - a header, a body, and a footer. On smaller screens (i.e. mobile) the 3 elements simply stack as you'd expect.
However, on larger desktop screens, I want the elements to split into 2 columns - the header and footer on the left, and the body on the right.
The problem is I'm actually not sure I can create this behaviour with CSS alone.
The best I can achieve ends up with the footer element staying in line with the bottom of the body element, like the below image (I understand why, I just want to figure out a way around this.)
I've tried a few methods using floated elements, as well as flexbox solutions and playing with the ordering, but with no success. I even tried some grid stuff, although my knowledge of grid isn't great so I may have missed something.
I know that I could use JS to do something such as moving the header and footer within a single parent element, or back out again, depending upon screen size. But I'm hoping there's a CSS-only way to achieve this, as that doesn't seem very elegant.
Thanks in advance for any suggestions!

Answer 1

Use css-gridwith the use of `grid-template-areas" to define the placement of a specific section as the example below. To allow the body section to extend further then the header and footer, you just need to use 3 rows.
body {
display: grid;
margin: 0;
padding: 20px;
grid-gap: 20px;
}
section {
background-color: red;
color: white;
padding: 10px;
}
#header {
grid-area: header;
}
#body {
grid-area: body;
}
#footer {
grid-area: footer;
}
#media only screen
and (max-width: 480px) {
body {
grid-template-areas:
"header"
"body"
"footer";
}
}
#media only screen
and (min-width: 481px) {
body {
grid-template-areas:
"header body"
"footer body"
". body";
grid-template-columns: 4fr 6fr;
}
}
/* for styling purpose only */
#body {
min-height: 70vh;
}
<section id=header>Header</section>
<section id=body>Body</section>
<section id=footer>Footer</section>

Answer 2

I have used CSS Grid to achieve this, I know you already acheived in Mobile version so I'm just sharing the demo code for Desktop Version. CSS Grid is really powerful you can create complex layout in minutes.
.outer{display: grid; grid-template-areas: 'header body' 'footer body' 'footer body';
}
.header{width: 100%; grid-area: header; height: 50vh; background-color: yellow;}
.body{grid-area: body; background-color: red; }
.footer{grid-area: footer; height: 50vh; background-color: violet;}
<div class='outer'>
<div class='header'> HEADER</div>
<div class='body'> body</div>
<div class='footer'> Footer</div>
</div>

Answer 3

using a div with zero width and height and margin negative of the div the result can be achieved.
the purple is a div with display flex and a normal 
orientation with flex wrap turned on. orange is the footer. it has a 
negative margin to equivalent to the body height plus the. the thing in yellow
is a div with width and height 0 and margin bottom equivalent to its height
of the body. when the page is wide enough both the body and and the yellow
div are moved to the side and the negative margin of the footer makes it go up to just
bellow the header at the bottom is an in browser version, the yellow square is there to indicate
the location of the padding div.

Answer 4

I know we are in 2021, but old good simple floats can be used for this task
#media (min-width: 480px) {
div {
display: flow-root;
border: 1px #ccc dashed;
}
header, footer {
width: 40%;
float: left;
}
main {
float: right;
width: calc(60% - 10px);
}
}
div > * {
box-sizing: border-box;
color: #fff;
background: #eb0022;
padding: 10px;
margin-bottom: 10px;
}
<div>
<header>header</header>
<main>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos tempore doloremque, illum praesentium atque cumque nulla, dolorum obcaecati quod recusandae itaque pariatur unde soluta blanditiis repudiandae perspiciatis deserunt fuga commodi.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos tempore doloremque, illum praesentium atque cumque nulla, dolorum obcaecati quod recusandae itaque pariatur unde soluta blanditiis repudiandae perspiciatis deserunt fuga commodi.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos tempore doloremque, illum praesentium atque cumque nulla, dolorum obcaecati quod recusandae itaque pariatur unde soluta blanditiis repudiandae perspiciatis deserunt fuga commodi.</p>
</main>
<footer>footer</footer>
</div>