html - CSS 位置固定在顶部，带有水平和垂直滚动条

Question

我有以下带有 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”的水平滚动条滚动。

请帮帮我。提前致谢。

Answer 1

将你的代码改成这样

*{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 上的结果相同