28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je tente actuellement de réaliser une mise en page basique, ayant un div header, middle et footer. Le footer doit rester en pied de page n'importe quand. Le problème est que si le texte de mon middle est plus grand que la height de la page, et bien le footer passe dessus, et je n'ai aucun scroll pour tenter de voir la suite du texte. Auriez vous une solution ?

Le CSS :

html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
}
#container {
	position: relative;
	min-height: 100%;
}
#header {
	height:50px;
	background: #99FF00;
	width:100%;
	display:block;
}
#middle {
	width:100%;
	display:block;
}
#footer {
	background: #FFCC66;
	width:100%;
	display:block;
	bottom:0px;
	position:absolute;
}


Le HTML :
<html>
	<head>
		<title>Squelette</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div id="container">
			<div id="header">HEADER</div>
			<div id="middle">MIDDLE</div>
                        <div id="footer">FOOTER</div>
		</div>
	</body>
</html>



Merci d'avance ! Smiley smile
Modifié par Aerandir (18 Dec 2006 - 12:09)
Merci !

Il fallait rajouter un simple padding-bottom de la taille du footer dans le #container. J'avais tenté un margin sur le footer mais pas un padding sur le container.

En tout cas merci beaucoup !