1358 votes

Comment aligner le contenu d'un div en bas de page

Disons que j'ai le code CSS et HTML suivant :

#header {
  height: 150px;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

La section de l'en-tête est de hauteur fixe, mais le contenu de l'en-tête peut changer.

Je voudrais que le contenu de l'en-tête soit aligné verticalement sur le bas de la section d'en-tête, de sorte que la dernière ligne de texte "colle" au bas de la section d'en-tête.

Ainsi, s'il n'y a qu'une seule ligne de texte, ce serait comme :

\-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

Et s'il y avait trois lignes :

\-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

Comment faire cela en CSS ?

-1voto

<head>
    <title>Test</title>
    <style type="text/css">
    table { width:500px; border-collapse:collapse}
    th, td { border:1px solid black; vertical-align: top;}
    th { width:100px; }
    td { background:#ccc; }
    .wrap { position:relative; height:100%; padding-bottom:1em; background:#aaa; 
            height:200px;}
    .manage { text-align:right; position:absolute; bottom:0; right:0; }
    p{ margin: 0 0 5px 0; }
    </style>
</head>
<body >
<table>
    <tr>
        <th>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero.</th>
        <td>
            <div class="wrap">
                <p><a href="http://www.pronexo.com">www.pronexo.com</a></p>
                <div class="manage">Edit | Delete</div>
           </div>
        </td>
    </tr>

    <tr>
        <th>Cras diam.</th>
        <td>
            <div class="wrap">
                <p>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut,
                libero. Sed elementum. Praesent porta, tellus ut dictum
                ullamcorper, est ante condimentum metus, non molestie lorem
                turpis in sapien. Aenean id enim. Nullam placerat blandit ante
                Aenean ac ligula.</p>
                <div class="manage">Edit | Delete</div>
            </div>
        </td>
    </tr>
</table>
</body>

-4voto

Fakeer Points 35

Un exemple parfait de cross-browser est probablement celui-ci :

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

L'idée est à la fois d'afficher le div en bas et de le faire rester à cet endroit. Souvent, l'approche la plus simple consiste à faire défiler la div adhésive vers le haut avec le contenu principal.

Voici un exemple minimal qui fonctionne parfaitement. Notez qu'il n'est pas nécessaire d'incorporer des divs. Les nombreux BRs ne servent qu'à forcer l'apparition d'une barre de défilement :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>

<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <div id="floater"></div>
</body>
</html>

Si vous vous demandez si votre code ne fonctionne pas sous IE, n'oubliez pas d'ajouter la balise DOCTYPE en haut de la page. Il est essentiel qu'elle fonctionne sous IE. En outre, cette balise doit être la première et rien ne doit apparaître au-dessus.

-4voto

esp Points 1051

Ça a l'air de fonctionner :

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

Utilisation de moins rend la résolution d'énigmes CSS beaucoup plus proche du codage que de... J'adore les CSS. C'est un vrai plaisir quand on peut changer toute la mise en page (sans la casser :) juste en changeant un paramètre.

-7voto

waza123 Points 627

Solution 2015

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

votre accueil

Prograide.com

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.

Powered by:

X