CSS：在固定div容器中滚动
[英]CSS: Scroll in fixed div-Container
问题描述
我正在尝试在页面上启用工作滚动条。 问题是我的div容器是固定的，因为我有三个相对的div，它们将我的背景分为三列。 我用overflow-y尝试过，但这对我的div没有影响。 它仅适用于相对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>
有谁知道如何启用滚动条或如何摆脱相对的背景div？
3 个解决方案
解决方案1
0
您可以使用overflow: scroll;在元素内overflow: scroll;
解决方案2
0 2018-01-18 19:03:54
只需使用溢出y：scroll。 我使用了200px的高度。 您可以据此使用。 使用如下代码：
.top {
position: fixed;
text-align:center;
overflow-y:scroll;
}
或检查jsfiddle
解决方案3
0 已采纳 2018-01-18 19:06:02
您应该尝试另一种方法，希望将背景固定在左右，并将内容固定在其中。
<!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>
这将起作用，尽管它仍然可能不是最佳解决方案。 但这完全取决于您的实际需求。 但是尝试一下。
希望能帮助到你！
是否可以在“ overflow-x：scroll” div容器内证明div元素的可见性？
[英]Is it possible to proof an div element of visibility inside a “overflow-x:scroll” div-container ?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.