css: comment puis-je m'assurer qu'un élément html est toujours au bas de la page?

Dire que j'ai ce code html:css: comment puis-je m'assurer qu'un élément html est toujours au bas de la page?

<html> 
<body> 
<div id="Div1" style="position:relative"> 
    <span style="position:absolute;top:100px">My text</span> 
</div> 
<div id="Div2"> 
Test 
</div> 
</body> 
</html>

Que dois-je faire pour Div2 toujours au-dessous Div1 quel que soit le contenu de Div1? Parce que le span utilise position: absolute dans Div1, le contenu de Div2 apparaît au-dessus du contenu de Div1.

Source

2009-09-11 Anthony

Veuillez coller le fichier CSS que vous utilisez. – Santi

il n'y a pas d'autre CSS. – Anthony

L'affiche DIV2 raison ci-dessus div1 est parce que div2 est positionné de façon absolue. Cela signifie que div1 ne participe pas au flux de document normal, comme si elle avait été retirée du document. Donc, div2 apparaît en haut, alors votre positionnement absolu pousse div1 à 100px.

Supprimez le positionnement absolu de div1, puis utilisez les marges ou le bourrage pour le déplacer vers l'emplacement souhaité. De cette façon, le rendu html normal place div2 sous div1.

Si vous êtes obligé de positionner absolument div1, vous devez également positionner div2. Vous devrez peut-être utiliser javascript pour déterminer la hauteur de div1 et définir le haut de div2 de manière appropriée.

<html> 
<body> 
<div id="Div1" style="position:absolute; top: 100px;"> 
    <span>My text</span> 
</div> 
<div id="Div2" style="position:absolute; top: 130px;"> 
Test 
</div> 
</body> 
</html>

Source

2009-09-11 17:19:41

Ou simplement noyer Div2 dans ce span/div et mettre marge-dessus sur elle et voala ...;) – Gavrisimo

-2

utiliser l'affichage: bloc; sur ces divs

Source

2009-09-11 16:18:42 Jeff

Les divisions sont des blocs par défaut. –

En effet. Cela ne fait aucune différence. – Anthony

Jeff: div est en tant qu'éléments de bloc standard, ce qui ne fera aucune différence.

Vous pouvez essayer:

<div id="Div1" style="position:relative; display:inline-block"> 
    <span style="position:absolute;top:100px">My text</span> 
</div> 
<div id="Div2"> 
    Test 
</div>

Source

2009-09-11 16:44:19 Jafu

Merci, mais cela ne fait aucune différence. Div2 apparaît toujours au-dessus de Div1. – Anthony

Pourquoi ne pas le faire?

<div id="Div1" style="margin-top:100px"> 
    <span>My text</span> 
</div> 
<div id="Div2"> 
Test 
</div>

Je ne comprends pas pourquoi vous le faites de cette façon. Pourriez-vous expliquer un peu plus ce que vous essayez de faire? Je suis sûr qu'il y a un meilleur moyen

Source

2009-09-11 17:10:22 marcgg

J'ai édité ma réponse, cela devrait fonctionner ... sauf si vous avez vraiment besoin d'avoir un positionnement absolu partout – marcgg

Fondamentalement, j'ai 2 Divs et je veux que Div2 soit en dessous de tout contenu de Div1.En réalité, Div1 contient quelques images et ces images sont situées dans la Div1 en utilisant le positionnement absolu. Je voudrais que le contenu de Div2 soit en dessous de ces images qui sont dans Div1. – Anthony

Ce que vous avez fait, mais vous avez changé la question. Le contenu de Div1 est positionné en utilisant le positionnement absolu. – Anthony

voulez-vous div2 ci-dessous div1 ou tout en bas de la page? si vous le voulez en dessous de div1 puis ajoutez

clear:both;

à div2.

si vous le voulez fixé au bas de la page, puis utiliser une propriété de position fixe sur le div2

Source

2009-09-11 17:13:14 marauder

Cela ne fonctionne pas – Anthony

Peut-être que quelque chose comme ça?

<html> 
<body> 
    <div id="Div1" style="position:relative"> 
     <div style="position:absolute;top:0">just some text<br />very long text<br />very long text<br />very long text<div id="Div2" style="margin-top:30px">div thats always below(30px's below)</div></div>  
    </div> 
</body> 
</html>

Source

2009-09-11 17:34:16 Gavrisimo

D'autres ont répondu à cette question correctement sur la position: relative par rapport à la position: absolue et page flux dans le conteneur div.

Juste pour ajouter à la réponse. J'ai trouvé le didacticiel suivant vraiment utile quand j'appris sur le positionnement en CSS.

Learn CSS Positioning in Ten Steps

Source

2009-09-11 18:19:51

css: comment puis-je m'assurer qu'un élément html est toujours au bas de la page?

Répondre

Questions connexes