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%;
 }

如何将.abs div修复到.parent div的底部？

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%}

DEMO

Answer 3

您必须将父div设置为

position:relative;

如果我错了，请纠正我。

在滚动div中修复一个绝对div

3 个答案: