web-dev-qa-db-fra.com

position css: relative; coller au fond

<body style="min-height:2000px;">
    <div id="test" style="position:relative;bottom:0;">
         some dynamically changed content
    </div>
</body>

Qu'est-ce que j'attends:
- Si #test hauteur est supérieure ou égale à celle du corps, elle devrait coller au fond (comme cela se produit maintenant quand le modèle de bloc est utilisé)
- Si #test hauteur est inférieure à celle du corps, il convient toutefois de coller au bas de la page, en laissant un espace blanc au-dessus de celle-ci. (ce qui ne se produit pas, #test ne colle pas en bas).

-Utilisation position: absolute n'est pas acceptable alors #test n'influencera pas la hauteur du corps lorsque #test sera plus élevé que le corps.
- Utiliser position: fixed n'est pas acceptable car #test va coller au bas de la fenêtre, pas au corps.

Q: Puis-je obtenir ce que j'attends en utilisant seulement css? Comment?

Désolé pour le mauvais anglais, mais je pense que la question est facile à comprendre.
Je vous remercie.

P.S .: J'ai besoin de cela en css car certains contenus modifiés dynamiquement sont modifiés via js et je veux éviter de recalculer la position #test div à chaque changement.

UPD:

J'ai aussi essayé quelques trucs display:inline-block; vertical-align:bottom; toujours aucun résultat.

UPD2:

Merci les gars, il semble toujours que le moyen le plus simple est d’ajouter quelques lignes à mon javascript pour recalculer la hauteur du corps lors du changement de hauteur de #test.

htmlcssposition
16
sander

En raison de la nature dynamique de hauteur de #test, vous ne pouvez pas le faire avec CSS seul. Cependant, si vous utilisez déjà jQuery, un appel rapide .height () devrait vous permettre d'obtenir ce dont vous avez besoin (la hauteur de #test doit être soustraite pour que vous puissiez la positionner à partir de 2000 pixels de haut).

<style>
body {
    min-height: 2000px;
}

#test {
    position: relative;
    top: 2000px;
} 
</style>

<script>
var testHeight = $("#test").height();
$( "#test" ).css({
    margin-top: -testHeight;
});
</script>
8
Durthar

Je sais que c'est une vieille question, mais vous pouvez essayer de faire:

top: 100%;
transform: translateY(-100%);

Transform fonctionne avec la taille de l'élément lui-même, il remontera donc au fond du conteneur. Vous pouvez utiliser des lettres pour les 3 axes.

7
librewolf

Les deux seules méthodes purement CSS pour créer un pied de page collant de hauteur dynamique que je connaisse utilisent des flexbox (pas de support dans IE9-, malheureusement) et en utilisant Tables CSS :

html, body {
    height: 100%;    
    margin: 0;
}
body {
    display: table;
    width: 100%;
    min-height:2000px;
}
#test {
    display: table-footer-group;
    height: 1px; /* just to prevent proportional distribution of the height */
}
4
Ilya Streltsyn

Il est très possible d'utiliser la position relative. voici comment vous le faites. 

Supposons que la hauteur de votre pied de page sera de 40 pixels. Votre conteneur est relative et le pied de page est également relative. Tout ce que vous avez à faire est d’ajouter bottom: -webkit-calc(-100% + 40px);. votre pied de page sera toujours au bas de votre conteneur.

HTML sera comme ça 

<div class="container">
  <div class="footer"></div>
</div>

CSS sera comme ça

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.footer{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Exemple live ici

J'espère que cela t'aides. 

3
Aditya Ponkshe
#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
}
/* IE6 */
* html #footer{
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

JSFiddle: http://jsfiddle.net/As3bP/ - position: fixed; C'est le moyen évident de le faire, et si cela affecte votre mise en page, essayez de poster vos problèmes ici. Il serait plus facile de modifier le code CSS de votre contenu que d'essayer de trouver un autre moyen de le faire.

L'expression IE6 n'est pas bonne pour la vitesse du tout, mais ça marche, lisez ceci à ce sujet: http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions -7202.html

EDIT Lisez vos modifications, oubliez ce qui précède. Pour être coincé au bas du corps, il serait facile de le positionner dans votre code HTML. C’est simple, postez un exemple de code si vous avez besoin d’aide supplémentaire. Positionner quelque chose au bas de la page, par défaut, se positionne au bas de la page.

JSFiddle: http://jsfiddle.net/TAQ4d/ si vous en avez réellement besoin.

1
Nick Bull

si vous ne voulez pas utiliser position:absolute; left:0; bottom:0;, alors vous pouvez essayer le simple margin-top:300px;...

0
Ritabrata Gautam

réponse courte: Non, vous ne pouvez pas faire cela avec du css pur, car c’est tout simplement le sens inverse du flux normal de pages (ii signifie de bas en haut);
vous pouvez utiliser ce plugin qui est très facile à utiliser stickyjs ;
utilisez-le avec bottomSpacing: 0 

MODIFIER
cette position fixe usese fixe aussi!
alors je pense que vous devriez l'écrire par vous-même ou avoir quelqu'un pour l'écrire pour vous: D

0
Homam

Oui c'est possible avec CSS seulement:

HTML:

<body>
    <div id="test">
        some dynamically
        changed content
    </div>
</body>

CSS:

body{
    line-height: 2000px;
}

#test{
    display: inline-block;
    vertical-align: bottom;
    line-height: initial;
}

JSFiddle

Si vous voulez avoir le texte au bas de l'écran, vous pouvez utiliser:

body {
    line-height: 100vh;
    margin: 0px;
}
0
CHlM3RA

voici la solution que je viens avec

<ul class="navbar">

    <li><a href="/themes-one/Welcome"> Welcome <i></i></a></li>
    <li><a href="/themes-one/Portfolio"> Portfolio <i></i></a></li>
    <li><a href="/themes-one/Services"> Services <i></i></a></li>
    <li><a href="/themes-one/Blogs"> Blogs <i></i></a><i class="arrow right"></i>
        <ul class="subMenu">
            <li><a href="/themes-one/Why-Did-Mint-Net-CMS-Born"> Why Did Mint Net CMS Born <i></i></a></li>
            <li><a href="/themes-one/Apply-AJAX-and-Mansory-in-gallery"> Apply AJAX and Mansory in gallery <i></i></a></li>
            <li><a href="/themes-one/Why-did-Minh-Vo-create-Mint-Net-CMS"> Why did Minh Vo create Mint Net CMS <i></i></a></li>
        </ul>
    </li>
    <li><a href="/themes-one/About"> About <i></i></a></li>
    <li><a href="/themes-one/Contact"> Contact <i></i></a></li>
    <li><a href="/themes-one/Estimate"> Estimate <i></i></a></li>


</ul>

<style>

    .navbar {
        display: block;
        background-color: red;
        height: 100px;
    }

    li {
        display: table-cell;
        vertical-align: bottom;
        height: 100px;
        background-color: antiquewhite;
        line-height: 100px;
    }

    li > a {
        display: inline-block;
        vertical-align: bottom;
        line-height:initial;
    }

    li >ul {
        display: none;
    }


</style>
0
Võ Minh