html - 将元素移出滚动的 div

Question

HTML:

<div class="shortList" id="unselShortList">
   <div id="Value1">A</div>
   <div id="Value2">B</div>
    <div id="Value3">C</div>
    <div id="Value4">D</div>
    <div id="Value5">E</div>
    <div id="Value6">F</div>
    <div id="Value7">G</div>
    <div id="Value8">H</div>
   <div id="SubmitValue">
      <div id="submit"><a href = "#">OK</a></div>
   </div>
</div>

CSS:

#unselShortList {
    background-color: red; 
    overflow: scroll;
    height: 150px;
    position: relative;    
}
#submit {
    position: absolute;
}

jsfiddle: http://jsfiddle.net/iyogesh/4sxNg/

“确定”超链接位于 div 内。 如何使用 CSS 将“OK”链接移出滚动的 div 并在 div 之后显示它，而不更改 html 结构？

Answer 1

检查这个fiddle

添加父元素

<div id="unselShortList">
    <div class="shortList" >
        <div id="Value1">A</div>
        <div id="Value2">B</div>
        <div id="Value3">C</div>
        <div id="Value4">D</div>
        <div id="Value5">E</div>
        <div id="Value6">F</div>
        <div id="Value7">G</div>
        <div id="Value8">H</div>
    <div id="SubmitValue">
        <div id="submit"><a href = "#">OK</a></div>
    </div>
    </div>
</div>

CSS

#unselShortList {
position: relative;
padding-bottom:31px;
}
.shortList{
height: 150px;
background-color: #33cccc;
overflow: scroll;
margin-bottom:25px;
}
#submit {
position: absolute;
}
#SubmitValue{
position:absolute;
bottom:0;
}