CSS div with position absolute and scrolling

YuGiOhJCJ 0
Viewed 38

I would like these positions and dimensions for the div elements of my HTML document: enter image description here

In each of these div elements, if the content is too large to fit into them (a lot of text for example), I want to have a vertical scrollbar to scroll the content. I would like a scrollbar per div and I don't want a unique scrollbar for the web page.

So, I would like to keep the positions and dimensions of my div fixed. I just want to have the possibility to scroll in these div if necessary.

I wrote this CSS sheet:

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%;
}

I wrote this HTML document:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <div class="header">Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz.</div>
        <div class="menu">Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz.</div>
        <div class="main">Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz.</div>
        <div class="footer">Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz. Aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz.</div>
    </body>
</html>

The result is not the one expected when there is a lot of text: enter image description here

As you can see a scrollbar is missing in each div element. So, I can't read all the text content in the div elements.

How can I get the expected result please?

Thank you.

Best regards.

I tried the Cédric solution.

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:

enter image description here

As you can see a scrollbar is missing in some div elements. It happens when the window is small.

absolute position scroll css html
1 Answers

Here I set width (% but could be vw, viewport-percentage width) and height of every elements (vh, viewport-percentage height)

I also used overflow-y:scroll on the 4 container.

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;
}
<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>

Cédric0
Related