1

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

.absdiv を divの一番下に固定するにはどうすればよい.parentですか?

4

3 に答える 3

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/

于 2013-08-30T12:45:37.753 に答える
0

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

デモ

于 2013-08-30T12:24:48.210 に答える
-1

親divをに設定する必要があります

position:relative;

または、間違っている場合は修正してください。

于 2013-08-30T12:23:51.837 に答える