我有以下带有 fiddel 链接的代码:jsfiddlel
HTML:
<div id="scroller">
<div id="container">
<div id="fixed">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</div>
</div>
CSS:
#scroller {
position: relative;
height: 400px;
width: 400px;
overflow: auto;
border: 1px solid;
background-color: #EEE;
}
#container {
height: 800px;
}
#fixed {
position: absolute;
height: 100px;
background-color: #FF0000;
top: 0;
left: 0;
width: 600px;
display: block;
}
我想将 ID 为“#fixed”的 div 标记固定在带有垂直和水平滚动条的“#scroller”div 内的顶部。我能够获得两个滚动条,但无法将“#fixed”div 粘贴到“#scroller”div 的顶部。
“fixed”中的内容应该可以用“#scroller”的水平滚动条滚动。
请帮帮我。提前致谢。
最佳答案
将你的代码改成这样
*{box-sizing: border-box}
#scroller {
position: relative;
height: 400px;
width: 400px;
border: 1px solid;
background-color: #EEE;
}
section{
position: absolute;
top:170px;
left:0;
bottom: 0;
width: 100%;
overflow-y: auto
}
#container {
height: 800px;
position: relative;
}
#fixed {
position: absolute;
background-color: #FF0000;
top: 0;
left: 0;
padding: 20px;
width: 100%;
height: 170px
}
<div id="scroller">
<section>
<div id="container"></div>
</section>
<div id="fixed">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</div>
JSFIDDLE 上的结果相同
关于html - CSS 位置固定在顶部,带有水平和垂直滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27522372/