28172 sujets

CSS et mise en forme, CSS3

[Résolu] CSS, pied de page qui prend le reste e la hauteur disponible

Bonjour,

Voici mon code html:


<body>
    <div id="site">
        <div id="header">...</div>
        <div id="container">
            <div id="sidebar">...</div>
            <div id="content">...</div>
        </div>
        <div id="footer">...</div>
    </div>
</body>


Un peu de CSS:


#site {width: 960px; margin: auto;}
#header {height: 120px; background: lightblue;}
#container {overflow: hidden;}
#sidebar {width: 220px; float: left;}
#content {width: 740px; margin-left: 220px;}
#footer {???}


J'aimerais simplement que mon footer prenne automatiquement toute la hauteur du reste de la hauteur de la fenêtre disponible, est-ce possible?

Afin d'y mettre une image de fond, grande qui se laisse apparaître si on à une grande résolution.

Merci d'avance
Salut salut,

Déjà si tu veux un comportement de ce type je te déconseille l'utilisation du float, d'ailleurs j'ai tendance à la déconseiller tout court ^^. Tu pourrais opter pour une solution a base de display: table (bonne base pour le responsive en plus).
	body, html {
		height: 100%
	}
	#site {
		display: table;
		height: 100%;
		width: 100%;
	}
	#header, #container, #footer {
		display: table-row;
	}
	#sidebar, #content {
		display: table-cell;
	}
	#footer {
		height: 100%;
	}
à modifier en fonction de tes besoins notamment au niveau de la largeur mais le principe est là.
Yes, merci ça fonctionne, je suis arrivé à cela:


<div id="site">
    <div id="header">
        ...
    </div>

    <div id="container">
        <div id="sidebar">
            ...
        </div>

        <div id="content">
            ...
        </div>
    </div>

    <div id="footer">
        ...
    </div>
</div>




#site {position: relative; display: table; width: 960px; margin: auto; height: 100%; background: lightblue;}

#header, #footer {display: table-row;}
#sidebar, #content {display: table-cell;}

#header {position: relative; height: 223px; overflow: hidden; background: #f5f0ee;}

#container {display: table; overflow: hidden; background: #605d5c;}

#sidebar {width: 220px; background: lightblue;}
#content {width: 740px; background: lightcoral;}

#footer {height: 100%; margin: auto; background: red; overflow: hidden;}


Problème résolu, merci.
Sujet clos
Aller à