gpt4 book ai didi

html - CSS:在固定的 div-Container 中滚动

转载 作者:行者123 更新时间:2023-11-28 15:11:20 24 4
gpt4 key购买 nike

我正在尝试在我的页面上启用一个工作滚动条。问题是我的 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?

最佳答案

只需使用 overflow y:scroll。我使用了 200px 的高度。您可以相应地使用。使用如下代码:

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

或检查jsfiddle

关于html - CSS:在固定的 div-Container 中滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48328443/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com