CSS: Scroll in fixed div-Container
Question
I'm trying to enable a working scroll bar on my page. The problem is that my div-container is fixed, because I have three relative divs that slice my background in three columns. I tried it with overflow-y but this has no effect on my div. It works just on the relative divs.
body, html { height: 100%; min-height: 100%; margin: 0; padding: 0; } .bg_left { background-color: #333C33; background-position: left; background-repeat: repeat; float: left; position: relative; } .bg_middle { background-color: #FFFFFF; background-repeat: repeat; float: left; position: relative; } .bg_right { background-color: #005050; background-repeat: repeat; float: left; position: relative; } .top { position: fixed; text-align:center; }
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> </head> <body> <div class="bg_left" style="width: 33.3%; height: 100%"></div> <div class="bg_middle" style="width: 33%; height: 100%"></div> <div class="bg_right" style="width: 33%; height: 100%"></div> <div class="top" style="width: 100%; height: 100%">Test <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> test </div> </body> </html>
Does anyone know how to enable the scroll bar or how to get rid of the relative background divs?
3 answers
solution1
0
You can enable scrolling inside an element by using overflow: scroll;
solution2
0 2018-01-18 19:03:54
Simply Use overflow y:scroll. I have used height 200px. You can use accordingly. Use Code like :
.top {
position: fixed;
text-align:center;
overflow-y:scroll;
}
or check jsfiddle
solution3
0 ACCPTED 2018-01-18 19:06:02
You should try a different approach, you want the background fixed in the left and the right, and the content inside.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body, html {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.bg_left {
background-color: #333C33;
background-position: left;
position: fixed;
left:0;
height: 100vh;
}
.bg_right {
background-color: #005050;
position: fixed;
right:0;
height: 100vh;
}
.top {
text-align:center;
}
</style>
</head>
<body>
<div class="bg_left" style="width: 33.3%; height: 100%"></div>
<div class="bg_right" style="width: 33.3%; height: 100%"></div>
<div class="top" style="width: 100%; height: 100%">Test
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
test</div>
</body>
</html>
This will work, although it's still probably not the best solution. But it all depends in the real need you have. But try this out.
Hope it helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.