I have a webpage with a sticky header and footer. Inside the main body I have a page and inside the page is content. I want to have a scrollbar on the page. I have added some text inside the content but when I scroll down the background color of the content only extends the height of the viewport. The text continues to be visible upon scrolling but not the background color. The content is 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%;
/*NOTE: Bootstrap uses base font size of 16px Use percentages of this to change size. */
font-family: Roboto serif;
}
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/[email protected]/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>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p>
THE END THE END
</p>
</div> <!-- end content -->
</div> <!-- end page -->
<footer>
<div id="copywrite-div">
<div id="copywrite-label-div">
<div class="footer-label">Copyright © 2024 - Yogi Bear</div>
</div>
<button class="footer-button" id="close-footer-ad-button">X</button>
</div>
<div id="line-div"></div>
<div class="footer-advertisement" id="footer-ad">
<div class="line-div"></div>
<div class="footer-ad-rectangle"> Advertisement</div>
</div>
</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/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
2
Answers
The Problem and How to Fix it
This is the CSS for your
.contentdiv.The
height: 100%;makes the.contentdiv have a height of only 100%, which in this case is the height of screen. Hence it can’t stretch itself till, the end of the text inside it. So removing it will give you want you wanted.The fixed snippet
Happy coding! 🙂
The
height: 100%fills 100% of parent’s height, which is 100vh. To make it equal to children height useheight: fit-contentorheight: max-content.