<header>Header</header>
<main>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem vel cumque quis animi nisi, odit totam laborum quam molestias sed quidem, dolorum deleniti quae possimus obcaecati eaque praesentium alias! Aperiam.</p>
	<p>Blanditiis maxime odit expedita modi a itaque? Placeat expedita nam, aut ea odit dolores est optio ut odio pariatur! Similique pariatur perferendis quaerat sequi. Eligendi qui illo nesciunt voluptates facilis!</p>
	<p>Reiciendis rem inventore asperiores sapiente cupiditate officia facilis earum accusantium deserunt, incidunt molestias! Fuga fugiat eveniet explicabo. Eveniet soluta voluptates saepe minima veniam illum error atque quibusdam, veritatis cupiditate culpa.</p>
	<p>Voluptatum eligendi totam, beatae ut ea, minus aut voluptate atque eaque maiores officiis praesentium aperiam impedit consectetur vero quia at nostrum? Similique dolorem cupiditate quis veniam! Soluta assumenda voluptatum delectus.</p>
</main>

<footer>
	Footer 
	- <a id="add-content" href="" role="button">ADD CONTENT</a>
	- <a id="remove-content" href="" role="button">REMOVE CONTENT</a>
</footer>

*, *:before, *:after { 
	box-sizing: border-box; 
}

html, body { 
	/*
		height: 100%; 
		- this can cause bugs in js with:
		- document.body.offsetHeight
		- document.documentElement.clientHeight
		- document.documentElement.offsetHeight
	*/
	
	min-height: 100vh;
	/*
		Better but, even min-height:100vh causes wrong 
		document.documentElement.clientHeight 😥
	*/
}

body {
	line-height: 1.5;
	font-family: sans-serif;
	> footer {
		position: sticky;
		top: 100vh;
	}
}

main { padding: 0 20px;}

header, footer {
	padding: 20px;
	background-color: #eee;
}

const main = document.querySelector("main");
const html = main.innerHTML;
const add = document.getElementById("add-content");
const remove = document.getElementById("remove-content");

add.addEventListener("click", (ev) => {
	ev.preventDefault();
	main.innerHTML += html;
});

remove.addEventListener("click", (ev) => {
	ev.preventDefault();
	main.querySelectorAll("p").forEach((el, i) => {
		if (i > 3) el.remove();
	});
});

void (function test() {
	var body = document.body;
	var html = document.documentElement;

	var height = Math.max(
		body.scrollHeight,
		body.offsetHeight,
		html.clientHeight,
		html.scrollHeight,
		html.offsetHeight
	);
	console.log(`height: ${height}`);
	console.log(`body.scrollHeight: ${body.scrollHeight}`);
	console.log(`body.offsetHeight: ${body.offsetHeight}`);
	console.log(`html.clientHeight: ${html.clientHeight}`);
	console.log(`html.scrollHeight: ${html.scrollHeight}`);
	console.log(`html.offsetHeight: ${html.offsetHeight}`);

	body.addEventListener("click", (ev) => {
		var height = Math.max(
			body.scrollHeight,
			body.offsetHeight,
			html.clientHeight,
			html.scrollHeight,
			html.offsetHeight
		);
		console.clear();
		console.log(`height: ${height}`);
		console.log(`body.scrollHeight: ${body.scrollHeight}`);
		console.log(`body.offsetHeight: ${body.offsetHeight}`);
		console.log(`html.clientHeight: ${html.clientHeight}${html.clientHeight < html.scrollHeight ? ' 😥':''}`);
		console.log(`html.scrollHeight: ${html.scrollHeight}`);
		console.log(`html.offsetHeight: ${html.offsetHeight}`);
	});
})();