CSS: 在固定的 div-容器中滚动

Question

我正在尝试在我的页面上启用工作滚动条。问题是我的 div-container 是固定的，因为我有三个相关的 divs 将我的背景分成三列。我用 overflow-y 试过了，但这对我的 div 没有影响。它仅适用于相对 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>

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

Answer 1

您可以使用 overflow: scroll;

在元素内启用滚动

Check this link for more information

Answer 2

简单地使用溢出y:scroll。我使用了 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-容器中滚动

CSS: Scroll in fixed div-Container

html

css

scroll

fixed

scrollbar