次のようなHTMLが与えられます。
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
私は#copyright
を#container
の下部に貼り付けたいと思っています。
絶対位置指定を使わずにこれを実現することはできますか?floatプロパティが 'bottom'という値をサポートしていれば、それだけで実現できそうですが、残念ながらそうではありません。
それはないでしょう。
まず、#container
に position:relative
を割り当て、次に #copyright
に position:absolute; bottom:0;
を割り当てます。
<! -- begin snippet: js hide: false -->
<!-- language: lang-html -->
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
<!-- language: lang-css -->
#container {
position: relative;
}
#copyright {
position: absolute;
bottom: 0;
}
試してみてください。
<div id="container">
<div style="height: 100%; border:1px solid #ff0000;">
<!-- Other elements here -->
</div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
Copyright Foo web designs
</div>