I suspect this has alerady been asked, but I could not find a way

Question

0

Asked: May 27, 20262026-05-27T06:07:38+00:00 2026-05-27T06:07:38+00:00

I suspect this has alerady been asked, but I could not find a way

0

I suspect this has alerady been asked, but I could not find a way to solve my problem with previous answers, or I didn’t have the ability to do it (I started to study CSS ten days ago).

So I want to emulate a paper page similar to the ones shown in Adobe Reader or MS Word: a white shadow rectangle against a gray background. My requirement, though, is that, since I’m going to display it in a browser, I want to fit the page vertically, leaving a fixed-pixel-sized small margin on top and bottom.

So far, I have got the code below, which do not expand vertically. I have already got the page to look ok with maximized window using height:99%, but then the bottom margin keeps changing size, and I didn’t like the effect. I want the bottom margin with fixed-sized pixel dimensions.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <!-- TODO: Expand page vertically but leave fixed top and bottom margins -->
        <meta charset="UTF-8" />
        <title>Relatório Html</title>
        <style type="text/css">
            html {height: 100%}

            body {
                height: 100%;
                background-color: #ccc;
            }

            .paperpage {
                position: relative;
                width: 400px;
                margin-left:auto;
                margin-right:auto;
                margin-top:10px;
                margin-bottom:10px;
                padding:30px;
                background-color: white;
                box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            }
        </style>
    </head>

    <body>
        <div class="paperpage">
            <p>Content</p>
        </div>
    </body>
</html>