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

上的结果相同