CSS：在固定div容器中滚动
[英]CSS: Scroll in fixed div-Container
问题描述
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. 问题是我的div容器是固定的，因为我有三个相对的div，它们将我的背景分为三列。 I tried it with overflow-y but this has no effect on my div. 我用overflow-y尝试过，但这对我的div没有影响。 It works just on the relative divs. 它仅适用于相对div。
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? 有谁知道如何启用滚动条或如何摆脱相对的背景div？
3 个解决方案
解决方案1
0
You can enable scrolling inside an element by using overflow: scroll; 您可以使用overflow: scroll;在元素内overflow: scroll;
解决方案2
0 2018-01-18 19:03:54
解决方案3
0 已采纳 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! 希望能帮助到你！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.