<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;
}
View Compiled
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}`);
});
})();
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.