Full height and width

---

The basics

---

Full height CSS

html, body {
    height: 100vh; /* legacy browsers */
    height: 100dvh; /* 2023+ browsers */
}

body {
    overflow-y: scroll;
}

#wrapper { /* this column */
    min-height: 100%;
}

---

Full width CSS

.max {
    width: calc(100vw - var(--scrollbar-width));
    position: relative;
    left: 50%;
    right: 50%;
    margin-right: calc(-50vw + (var(--scrollbar-width) / 2));
    margin-left: calc(-50vw + (var(--scrollbar-width) / 2));
}

Requires:

<script>
document.body.style.setProperty(
    "--scrollbar-width",
    `${window.innerWidth - document.body.clientWidth}px` // Backticks
);
</script>

---

See empty | full.html

See information

Page last modified: 19 August, 2024
Search | Legal | Qwwwik

Info

Qwwwik