Annetaan seuraava HTML:
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
Haluaisin, että #copyright
tarttuu #containerin
alareunaan.
Voinko saavuttaa tämän ilman absoluuttista asemointia? Jos float-ominaisuus tukisi arvoa 'bottom', se näyttäisi toimivan, mutta valitettavasti se ei toimi.
Todennäköisesti ei.
Määritä #container
:lle position:relative
ja #copyright
:lle position:absolute; bottom:0;
.
<!-- 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;
}
Kokeile tätä;
<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>
Jos haluat, että se "pysyy" alareunassa säiliön korkeudesta riippumatta, absoluuttinen asemointi on oikea tapa toimia. Tietenkin, jos tekijänoikeuselementti on säiliön viimeinen, se on joka tapauksessa aina alhaalla.
Voisitko tarkentaa kysymystäsi? Selitä tarkalleen, mitä yrität tehdä (ja miksi et halua käyttää absoluuttista asemointia)?