On my page i have a grid with a header content footer layout, so that the header and footer are always on top and bottom of the page. I also have a third party popover component on my page and it is styled with position: absolute. The popover contains a lot of text but should not be scrollable itself. Since it is positioned absolute it is not inside the main document flow and so the grid does not expand.
Is there a way to set the grid height in relation to the scrollHeight instead of the clientHeight of the document?
const updatePH = () => {
document.querySelector('#pH').innerHTML = JSON.stringify({
document: {
height:document.documentElement.getBoundingClientRect().height,
clientHeight: document.documentElement.clientHeight,
offsetHeight: document.documentElement.offsetHeight,
scrollHeight : document.documentElement.scrollHeight,
},
body: {
height: document.body.getBoundingClientRect().height,
clientHeight: document.body.clientHeight,
offsetHeight: document.body.offsetHeight,
scrollHeight : document.body.scrollHeight,
}
}, null, 2);
};
updatePH();html, body{
padding: 0;
margin: 0;
}
section{
min-height: 100dvh;
height: max-content;
display: grid;
grid-template-rows: auto 1fr auto;
overflow: clip;
}
header, footer{
background: skyblue;
padding: 1rem;
}
.content {
padding: 1rem;
}
input + .popover{
display: none;
}
input:checked + .popover{
display: block;
position: absolute;
width: 200px;
border: 1px solid black;
}<section>
<header>Header</header>
<div class="content">
Page height:<pre id="pH"></pre><br/>
show Popover: <input onclick="updatePH()" type="checkbox" />
<div class="popover">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus. Est ullamcorper eget nulla facilisi. Dignissim sodales ut eu sem integer vitae justo eget. Tempus iaculis urna id volutpat. Sagittis nisl rhoncus mattis rhoncus. Sed turpis tincidunt id aliquet risus feugiat in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Etiam dignissim diam quis enim. Nulla facilisi nullam vehicula ipsum a. Dui vivamus arcu felis bibendum ut tristique et egestas. Diam ut venenatis tellus in metus vulputate. Porta lorem mollis aliquam ut porttitor leo a. Pulvinar etiam non quam lacus suspendisse. Erat velit scelerisque in dictum non consectetur a. Vulputate odio ut enim blandit volutpat. Consequat id porta nibh venenatis cras sed. Vulputate eu scelerisque felis imperdiet proin fermentum leo.
Viverra accumsan in nisl nisi scelerisque eu ultrices vitae. Et pharetra pharetra massa massa ultricies mi quis. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Morbi tristique senectus et netus et. Netus et malesuada fames ac turpis egestas sed tempus urna. Sed arcu non odio euismod lacinia. Enim ut tellus elementum sagittis vitae et leo. Vulputate dignissim suspendisse in est ante. Vel fringilla est ullamcorper eget. Adipiscing bibendum est ultricies integer quis auctor elit sed vulputate. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Ac odio tempor orci dapibus. Et malesuada fames ac turpis egestas.
</div>
</div>
<footer>Footer</footer>
</section>I realise i can use javascript to update the layout. But maybe there is a css solution.
In my testing, the "better" of the solutions I found was using the new
:hasselector withviunits.:hasselector with100viviis a relatively new dimension but I believe it works on most (if not all) browsers, except most likely IE (EDIT: here's the compatibility table for the lengths).The
:hasselector is also quite new, and has mixed support. It is currently supported by all browsers since 09/2022 except for IE and Firefox, here's the compatibility tableI targeted the
sectionelement like so:But depending on you're use case this may not necessarily fully suite what you're after. It really depends on how you're controlling the popover visibility, or if adding a class to the
section(or similar) element when opening/closing the popover.100vmaxAnother option I tried was using the similarly new
vmaxdimension, but that served the whole page as if the the popup text were visible so it didn't resize when the popup content showed.100viSame story here, again I don't think this is what you're after but left it in in case you want to explore a different dimension unit to the above options.