Étant donné le code HTML suivant :
Je voudrais à coller au fond du .
Puis-je y parvenir sans utilisant le positionnement absolu ? Si la propriété float prise en charge d’une valeur de « bas » il semble que pourrait faire le truc, mais malheureusement, il ne marche pas.
En fait, la accepté de répondre par @Utilisateur ne fonctionnera que si la fenêtre est grande et que le contenu est court. Mais si le contenu est à la hauteur et que la fenêtre est court, il va mettre le droit d'auteur infos sur le contenu de la page, puis le défilement vers le bas pour voir le contenu de vous laisser avec un flottant avis de droit d'auteur. Ce qui rend cette solution inutile pour la plupart des pages (comme cette page, en fait).
La façon la plus courante de le faire est le "CSS sticky footer" approche présentée ici, ou un peu plus mince variation ici. Cette approche fonctionne très bien -- SI vous avez une hauteur fixe le pied de page.
Si vous avez besoin d'une variable de la hauteur de pied de page qui apparaîtra au bas de la fenêtre si le contenu est trop court, et au bas de le contenu si la fenêtre est trop court, que faites-vous?
Avaler votre fierté et l'utilisation d'une table.
Par exemple:
<!DOCTYPE html>
<html>
<head>
<style>
* { padding:0; margin:0; }
html, body { height:100%; }
#container { height:100%; border-collapse:collapse; }
</style>
</head>
<body>
<table id="container">
<tr>
<td valign="top">
<div id="main">Lorem ipsum, etc.</div>
</td>
</tr>
<tr>
<td valign="bottom">
<div id="footer">Copyright some evil company...</div>
</td>
</tr>
</table>
</body>
</html>
De l'essayer. Cela fonctionne pour n'importe quel taille de la fenêtre, pour toute quantité de contenu, quelle que soit la taille du pied de page, sur chaque navigateur... même IE6.
Si vous êtes terrés à l'idée d'utiliser un tableau pour la mise en page, prenez une seconde pour vous demander pourquoi. CSS était censé rendre notre vie plus facile-et il a, dans l'ensemble, mais le fait est que, même après toutes ces années, il est toujours brisé, contre-intuitif mess. Elle ne peut pas résoudre tous les problèmes. Il est incomplet.
Les tableaux ne sont pas cool, mais au moins pour l'instant, ils sont parfois le meilleur moyen de résoudre un problème de conception.
Oui vous pouvez le faire sans absolute positionnement et sans l'aide d' tables (qui vis avec le balisage et tel).
DÉMO
C'est testé pour fonctionner sur IE>7, chrome, FF et est vraiment une chose facile à ajouter à votre disposition.
<div id="container">
Some content you don't want affected by the "bottom floating" div
<div>supports not just text</div>
<div class="foot">
Some other content you want kept to the bottom
<div>this is in a div</div>
</div>
</div>
#container {
height:100%;
border-collapse:collapse;
display : table;
}
.foot {
display : table-row;
vertical-align : bottom;
height : 1px;
}
Il a effectivement fait ce qu' float:bottom serait, même en tenant compte de la question l'a souligné dans l' @Rick Reilly réponse!
C'est une vieille question, mais c'est une approche unique qui peut vous aider dans plusieurs cas.
vérifier que le Travail de Violon
Parce que les flux normal est de "haut en bas" on ne peut pas simplement demander à l' #copyright div à coller au fond de son parent sans absolument positionnement d'une certaine sorte, Mais si nous voulions que l' #copyright div à coller sur le haut de ses parents, il sera très simple - parce que c'est le flux normal.
Nous allons donc utiliser cela à notre avantage.
nous allons modifier l'ordre de l' divs dans le code HTML, maintenant l' #copyright div est en haut, et le contenu de la suivre tout de suite.
nous faisons aussi de la div du contenu étirer tout le chemin (à l'aide de pseudo-éléments et de compensation des techniques)
maintenant, c'est juste une question d'inverser l'ordre de retour dans la vue. qui peut être facilement fait avec CSS transform.
Nous faisons tourner le conteneur par 180deg, et maintenant: est-down. (et on inverse le contenu de regarder de nouveau normal)
Si nous voulons avoir un scroolbar à l'intérieur de la zone de contenu, nous avons besoin d'appliquer un peu plus de CSS de la magie. comme l'a montré Ici [dans cet exemple, le contenu est au-dessous d'un en-tête - mais c'est la même idée]
HTML: (remarquer le peu de changements)
<div id="Container">
<div id="Copyright">
Copyright Foo web designs
</div>
<div id="Stretch">
<!-- Other elements here -->
<div>Element 1</div>
<div>Element 2</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, #Container
{
height: 100%;
color: white;
}
#Container:before
{
content: '';
height: 100%;
float: left;
}
#Copyright
{
background-color: green;
}
#Stretch
{
background-color: blue;
}
#Stretch:after
{
content: '';
display: block;
clear: both;
}
#Container, #Container > div
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
