css i html-sida, bakgrund som ska flöda med vertikalt vid följsamt designläge

Jag håller på med en uppgift där en webbsida ska kunna visas såväl i desktop som i mobil.
Ingen användning av Media Queries, utan bara breddminskning via Chromes vebbläsarverktyg/följsamt läge.
Jag har testat och försökt med alla lösningar (tycker jag, utan att lyckas). När jag krymper ihop sidan lägger sig de olika elementen under varandra, som de ska, men body-höjden förblir oförändrad.
Jag letar efter någon form av float eller clear, som kanske kan funka.

Min kod så här långt:

html {
background-color: #fff;
}

body {
margin: 25px auto;
width: 40%;
background: linear-gradient(50deg, #8f8839 5%, #fff, #8b6edb);
border: 1px solid black;
min-height: 450px;
}

header {
position: relative;
clear:both;
margin-top: 1em;
margin-left: 1em;
margin-bottom: 0px;
width: 65%;
}

aside {
position: relative;
float: left;
margin-top: 2em;
margin-left: 1em;
width: 12em;
background-color: #fff;
border: 1px solid #000000;
}

article {
position: relative;
float:left;
margin-left: 2em;
margin-top: 2em;
width: 45%;
background-color: #fff;
border: 1px solid #000000;
}

section {
position: relative;
display: block;
float:left;
margin-top: 2em;
margin-left: 1em;
margin-bottom: 0;
background-color: #000;
}

Tacksam för all hjälp.
// Agneta