四个div被包裹在id="tzgDiv"的div下,但是这四个div是相对于body进行的绝对定位,如何让外层的div出现滚动条,使超出部分的div可以滚动显示。
我试过给外层div添加overflow:scroll的样式,貌似没效果,因为内层div是相对body定位的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
body{
position: relative;
}
#tzgDiv #tzg1{
position: absolute;
left: 0px;
top: 0px;
}
#tzgDiv #tzg2{
position: absolute;
left: 400px;
top: 0px;
}
#tzgDiv #tzg3{
position: absolute;
left: 800px;
top: 0px;
}
#tzgDiv #tzg4{
position: absolute;
left: 1200px;
top: 0px;
}
</style>
<body>
<div id="tzgDiv">
<div id="tzg1" style="width: 400px; height: 200px; background-color: blue;"></div>
<div id="tzg2" style="width: 400px; height: 200px; background-color: yellow;"></div>
<div id="tzg3" style="width: 400px; height: 200px; background-color: green;"></div>
<div id="tzg4" style="width: 400px; height: 200px; background-color: red;"></div>
</div>
</body>
</html>
如果你需要效果统一的话,可以使用:
设定后,溢出的内容会出现滚动条,没有溢出的会有一个滚动条的滚动区域样式。

如果是单纯的溢出显示滚动条,没溢出不显示,使用:
这里使用的是overflow-y,如果你需要横向滚动就使用overflow-x,上下左右都可以滚动就用overflow