I am looking to set specific positions and dimensions for the div elements within my HTML document. Refer to this image for reference:
https://i.stack.imgur.com/ANBVm.png
For each of these div elements, I want a vertical scrollbar to appear if the content exceeds the space available. Each div should have its own scrollbar, rather than one for the entire webpage.
The goal is to maintain fixed dimensions and positions for my div elements, with the ability to scroll through their contents when needed.
To achieve this, I have prepared the following CSS:
div {
position: absolute;
}
div.header {
background-color: red;
top: 0%;
left: 0%;
width: 100%;
height: 10%;
}
div.menu {
background-color: green;
top: 10%;
left: 0%;
width: 20%;
height: 80%;
}
div.main {
background-color: blue;
top: 10%;
left: 20%;
width: 80%;
height: 80%;
}
div.footer {
background-color: yellow;
top: 90%;
left: 0%;
width: 100%;
height: 10%;
}
Below is the HTML code that I have used:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="header"> [content goes here] </div>
<div class="menu"> [content goes here] </div>
<div class="main"> [content goes here] </div>
<div class="footer"> [content goes here] </div>
</body>
</html>
However, when there is a large amount of text, the expected result is not achieved. Here's how it looks: https://i.stack.imgur.com/KtjLO.png
As you can see, the individual div elements lack the necessary scrollbar for scrolling through the content, making it difficult to read everything present within them. How can I rectify this issue?
Your suggestions and help are highly appreciated. Thank you.
Best regards.
I've attempted implementing a solution provided by Cédric.
CSS:
body {
height: 100vh;
margin: 0;
display: flex;
flex-wrap: wrap;
}
.container {
overflow-y: scroll;
}
.content {
height: 1000px;
}
.header {
width: 100%;
height: 10vh;
background-color: red;
}
.menu {
width: 20%;
height: 80vh;
background-color: green;
}
.main {
width: 80%;
height: 80vh;
background-color: blue;
}
.footer {
width: 100%;
height: 10vh;
background-color: yellow;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container header">
<div class="content"></div>
</div>
<div class="container menu">
<div class="content"></div>
</div>
<div class="container main">
<div class="content"></div>
</div>
<div class="container footer">
<div class="content"></div>
</div>
</body>
</html>
Result:
https://i.stack.imgur.com/M5pec.png
In some cases, certain div elements still lack the scrollbar when the window size is reduced. This issue persists in smaller viewports.