I am currently working on creating a unique page template that has certain requirements:
- The height of the header may vary
- The content and aside containers should be independently scrollable
- Anchor links should not disrupt the page layout
To see what I have implemented so far, you can check out the showcase here.
const template = document.getElementById('tmplt');
const header = document.getElementById('header');
const button = document.getElementById('btn');
const toggleTemplate = () => {
header.children.length > 1 ? header.children[1].remove() : header.appendChild(template.content.cloneNode(true));
}
button.addEventListener('click', () => {
toggleTemplate();
});body {
padding: 0;
margin: 0;
}
#page {
max-height: 100vh;
height: 100vh;
overflow: hidden;
}
.container-flex {
display: flex;
flex-direction: row;
overflow: hidden;
height: 100%;
}
aside {
flex: 1 1 20%;
background-color: deeppink;
}
main {
flex: 1 1 80%;
background-color: cadetblue;
height: 100%;
overflow-y: auto;
}<div id="page">
<header id="header">
<h1>Title</h1>
</header>
<div class="container-flex">
<aside>
<p>Here could be some information</p>
<a href="#anchor">This is an Anchor-Link</a> to the Input Element on the bottom of the page
</aside>
<main>
<h2>Here shall be the main stuff</h2>
Clicking this <button id="btn">button</button> will make the header bigger / smaller by adding/removing elements
<p>Here can also be some kind of a very looooong text</p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo ...
...
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta ...
<p> and on the end of the page there will be an element to be focused
<p>
<input id="anchor" />
</main>
</div>
</div>
<template id="tmplt">
<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</blockquote>
<figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption>
</template>Is it possible to achieve my requirements using only CSS? Any suggestions on how to do this?
Here's one way to solve it:
- Set the height using JavaScript after changing the content of the header