☰
nivethan.dev:~/
Tuesday | 05 NOV 2024
[ previous ]
[ next ]

How to Make a Page 100vh

Title:
Date: 2023-07-23
Tags:  html, snippets

A quick snippet to make a full web page. This uses flexbox.

<html>
    <body>
        <header>Header</header>
        <main>
            <aside>Sidebar</aside>
            <article>Main Content</article>
        </main>
        <footer>Footer</footer>
    </body>
</html>

<style>
html,
body {
    min-height: 100vh;
}
body {
    display: flex;
    flex-direction: column;
}
header { }
main {
    display: flex;
    flex: 1;
}
article { flex: 1; }
footer { }
</style>