I've created a webpage with a sticky header and footer, along with a scrollbar on the main content. However, I'm facing an issue where the background color of the content does not extend beyond the viewport when scrolling down. The text is visible while scrolling, but not the entire background color. The content area is styled in green.
/******************************************************************************/
/* MAIN BODY */
/******************************************************************************/
:root {
--background-color: #fbedcf;
--primary-color: #77037B;
--label-color: #210062;
--secondary-color: #009FBD;
--white-color: #FFFFFF;
--black-color: #000000;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
margin: 0;
height: 100%;
font-family: Roboto serif; /* Bootstrap uses a base font size of 16px */
}
body {
min-height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
}
.page {
height: 100vh;
width: 100%;
border-top: solid 50px transparent;
border-bottom: solid 50px transparent;
overflow-y: auto;
background-color: var(--background-color);
}
.content {
height: 100%;
background-color: green;
margin-left: 15%;
margin-right: 15%;
}
p {
color: var(--label-color);
}
/******************************************************************************/
/* HEADER */
/****************************************************************************/
header {
position: fixed;
z-index: 98;
width: 100%;
height: 50px;
background-color: var(--primary-color);
text-align: center;
}
#header-title {
margin: auto;
font-family: Roboto, serif;
font-weight: bold;
text-align: center;
color: var(--background-color);
letter-spacing: 0.03em;
font-size: 140%;
line-height: 50px;
}
/********************************************************************/
/* FOOTER */
/*******************************************************************/
footer {
position: fixed;
bottom:0;
width:100%;
margin-top: auto;
background-color: var(--background-color);
color: var(--black-color);
}
.footer-label {
color:var(--primary-color);
font-size: 70%;
line-height: 24px;
}
#line-div {
border-top: 1px solid #999;
margin-right: 24px;
}
#copywrite-div {
display: flex;
justify-content: flex-end;
background-color: pink;
}
#copywrite-label-div {
margin-right: 10px;
}
.footer-button {
border: none;
background-color: #FFF;
border-left: 1px solid #999;
border-top: 1px solid #999;
width: 24px;
height: 24px;
border-radius: 5px 0 0 0;
}
.footer-advertisement {
display: block;
text-align: center;
width: 100%;
height: 50px;
background-color: var(--white-color);
}
.footer-ad-rectangle {
margin: 0 auto;
font-size: 70%;
width: 320px;
height: 50px;
line-height: 50px;
background-color: var(--white-color);
}<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e2efeff4f3f4f2e1f0c0b5aeb1aeb3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="main.css"/>
<title>JSP - Hello World</title>
</head>
<body>
<!-------------------------------------- START -------------------------->
<header>
<div id="header-title">THIS IS THE HEADER</div>
</header>
<div class="page">
<div class="content">
<p>THIS IS THE BEGINNING</p>
...
</footer>
<!--------------------------------------- END ------------------------------>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f0e1d1a4bfa0bfa2">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>