Question

我试图在我的页面上启用一个工作滚动条。问题是我的div容器是固定的，因为我有三个相对的div，它将我的背景分成三列。我用overflow-y尝试过，但这对我的div没有影响。它仅适用于相对div。

＆＃13;

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

＆＃13;

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

＆＃13;

有谁知道如何启用滚动条或如何摆脱相对背景div？

Answer 1

您可以使用overflow: scroll;

启用元素内部的滚动

Check this link for more information

Answer 2

简单地使用溢出y：滚动。我使用了200px的高度。你可以相应地使用。使用代码如：

.top {
    position: fixed;
    text-align:center;
    overflow-y:scroll;
}

或检查jsfiddle

Answer 3

你应该尝试不同的方法，你想要在左侧和右侧固定背景，以及内部的内容。

<!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>

虽然它可能不是最好的解决方案，但仍可以使用。但这一切都取决于你真正的需要。但试试这个。

希望它有所帮助！

CSS：滚动固定div-Container

3 个答案: