<main>
	<section>
		<article>
			<p>
				<b>Problem:</b> When a web page doesn't have enough content to fit the screen, the footer doesn't stay at the bottom so it ends up looking weird.
			</p>
			<p>
				<b>Solution:</b> Do the layout using flex columns. In addtion to that either,
				<ul>
					<li>
						Add <code>flex-grow: 1</code> to the content area, here it is the <code>section</code>.
						<br><b>OR</b>
					</li>
					<li>
						Add <code>margin-top: auto</code> to the element you you wish for it to always stay at the bottom, here it is <code>footer</code>.
					</li>
				</ul>
			</p>
		</article>
	</section>
	<footer>Always be sitting at the bottom.
	</footer>
</main>
<aside>
	<details>
		<summary> Why did the developer had to quit her job?
		</summary>
		Because she didn't get arrays.
	</details>
</aside>

body {
	width: 100%;
	margin: 0;
	display: flex;
	min-height: 100vh; /*always have atleast the height of viewport*/
	font-family: verdana, serif;
}

main {
	flex: 2;
	background: bisque;
	display: flex;
	flex-direction: column;
	font-size: 1.1rem;
	line-height: 1.5;
}

section {
	padding: 20px;
	flex-grow: 1; /*magical line*/
}

aside {
	flex: 1;
	background: powderblue;
	padding: 20px;
	font-size: 1.2rem;
	line-height: 1.4;
}

footer {
	padding: 20px;
	background: peru;
/* margin-top: auto;/* /*another magical line*/ 
}

@media screen and (max-width: 767px) {
	body {
		flex-direction: column-reverse;
	}
}

code {
	background: yellow;
	padding: 2px 5px;
	white-space: nowrap;
}

/*For something's in life, you don't need JS*/