full-page div flowing past bottom and right of page-CodePudding

I'm trying to set up this page so that some of the individual divs are scrollable while the page itself doesn't have overflow. I swear, I've done this a hundred times before, but I've always just managed to get the page functional, using a lot of work-arounds or just getting it right without knowing exactly why. This time, my issue is getting the bottom and right end of the page to remain within the viewport. I've tried a number of solutions that I found here and elsewhere, but nothing is working or I end up breaking the solution down the road.

My main question is what is the best way to set up this page--and future pages--so that it remains within view and the border margins are 5px? (The 5px is an arbitrary value, but I noticed that the margin at the top of the page is a little thinner than the rest.)

https://jsfiddle.net/puncushion/01w7qtxy/

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Title</title>
    <link rel="stylesheet" href="./styles.css" />
</head>

<body>
    <div >
        <header>
            <h1>Title</h1>
            <p>Subtitle</p>
        </header>
        <main>
            <p>Some text for main content area.</p>
        </main>
    </div>
</body>

</html>

CSS:


html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.container {
    height: 100%;
    width: 100%;
    margin: 5px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    border: 1px solid #000;
}

header {
    border-bottom: 1px solid black;
}

Thanks for the help y'all!

CodePudding user response：

Change .container width and height from 100% to like below. It calculates full height/width with margin. If you set width:100% and margin:5px then width is equal to width of window additionally 10px in margin.

 .container {
    height: calc(100% - 10px);
    width: calc(100% - 10px);
    ..........
 }