html - 修复滚动 div 中的绝对 div

Question

HTML 代码

<div class="parent">
    <div class="normal">
    a<br />a<br />a<br />a<br />a<br />a...
    </div>
    <div class="abs"></div>
</div>

CSS 代码

.parent {
    width:170px; height:300px; border:1px solid #000; 
    overflow:auto; position:relative;
 }
.normal {}
.abs {
    height:40px; position:absolute; bottom:0; 
    background-color:gray; width:100%;
 }

如何将 div 固定到.absdiv 的底部.parent？

Answer 1

我认为这可能是你想要的：

你原来的HTML是这样的：

<div class="parent">
    <div class="normal">
    a<br />a<br />a<br />a<br />a ... a<br />a<br />bottom
    </div>
    <div class="abs"></div>
</div>

对于你的CSS，试试这个：

.parent {
    width:170px;
    height: 340px;
    border:1px solid #000;
    position:relative
}
.normal {
    overflow:auto;
    height: 300px;
}
.abs {
    height:40px;
    position:relative;
    bottom: 0px;
    background-color: rgba(123, 123, 123, 0.4);
}

您希望文本滚动，因此设置overflow: auto为.normal块容器。

你.parent有一个固定的高度，所以调整高度为.normal总高度减去.abs元素的高度。

见演示：http: //jsfiddle.net/audetwebdesign/EbFXR/

Answer 2

HTML

<div class="parent">
    <div class="normal">
        a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
        <div class="abs"></div>
    </div>
</div>

CSS

.parent {width:170px; height:300px; border:1px solid #000; overflow:auto; position:relative}
.normal { position:relative; padding-bottom: 40px; }
.abs {height:40px; position:absolute; bottom:0; background-color:gray; width:100%}

演示

Answer 3

您必须将父 div 设置为

position:relative;

或者如果我错了，请纠正我。