page header footer using grid spec

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
    width: 100%;
    height: 100%;
    font-family: helvetica, arial;
    margin:0px;
}

.page-grid {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
}

.div-header{
    background-color: #dedede;
}

.div-content{
    border:1px solid #999999;
}

.div-grid-footer {
    background-color: #dedede;
    height:2em;
}
</style>
</head>

<div class="page-grid">
    <div class="div-header">
        [top section]
        <p>Sed elementum volutpat felis id accumsan. Fusce sed turpis fermentum mi auctor vulputate. Vivamus in fermentum enim. Nullam et tellus neque. In fringilla mauris in magna mollis cursus. Sed semper ut lacus ac lacinia. Cras vel porttitor sapien. Vivamus iaculis id lectus vitae facilisis. Quisque at molestie sem, sed varius diam. Phasellus eget venenatis neque. Fusce rhoncus neque et nisi laoreet elementum. Etiam molestie, felis vel ultrices molestie, mi enim efficitur est, nec sagittis nisl turpis a libero. Sed vitae felis tempor, aliquet ligula sed, porttitor nisl. Suspendisse placerat faucibus erat quis sagittis. Nullam bibendum massa quam, eget sodales est vehicula eget. Phasellus eget placerat ex, nec pellentesque est.</p>
    </div>
    <div class="div-content">
        [main content] fills space
    </div>
    <div class="div-grid-footer">
        [FOOTER]
    </div>
</div>

</body>
</html>