124

How can i position a div to the bottom of the containing div?

<style>
.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}
.inside {
    position: absolute;
    bottom: 2px;
}
</style>
<div class="outside">
    <div class="inside">inside</div>
</div>

This code puts the text "inside" to the bottom of the page.

4

3 に答える 3

143 
.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

する必要がある

.outside {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

絶対配置は、DOM 内で相対的に配置された最も近い親を探します。定義されていない場合は、本体が使用されます。

于 2013-03-12T10:26:06.190 に答える
74

に割り当てposition:relative、.outside次にposition:absolute; bottom:0;に割り当てます.inside。

そのようです：

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}
于 2013-03-12T10:26:10.387 に答える
20

に追加position: relativeし.outsideます。( https://developer.mozilla.org/en-US/docs/CSS/position )

相対的に配置された要素は、ドキュメント内の要素の通常の流れにあると見なされます。対照的に、絶対配置された要素はフローから取り出されるため、他の要素を配置するときにスペースを占有しません。絶対配置要素は、最も近い配置先祖に対して相対的に配置されます。配置された祖先が存在しない場合は、最初のコンテナーが使用されます。

「初期コンテナ」は になります<body>が、上記を追加すると.outside配置されます。

于 2013-03-12T10:30:39.097 に答える