28173 sujets

CSS et mise en forme, CSS3

[Design fluide] Height 100% et marge bas

Bonjour !

Je me posais la question de faire un site entièrement extensible horizontalement (rien de particulier là) ET verticalement.
Et bien évidemment, pour y ajouter une petite touche de difficulté, je veux une marge en bas... ^^
(Pas de bas de page en Javascript, evidemment ;p)

C'est là que ça coinçe...

Prenons une page html vierge de contenu pour le test
Et ce code CSS :


html {
	background: black;
	height:100%;
}

body {
	background: white;
	height: 100%;
	margin: 5em;


Ici, vous l'avez compris : La page est le cadre blanc lié par les styles du body, nous obtenons une hauteur de 100% verticalement et horizontalement, puis nous ajoutons un marge de 5em pour tous les points cardinaux... seulement... la marge du bas ne passe pas. Smiley langue

Ceci dit, j'ai remarqué que la marge en bas passe sous Konqueror et Internet Explorer ! :O (avec une scrollbar... Me demandez pas pourquoi)
Pas sous Firefox... ... ... ... Smiley biggol

Personnellement, j'ai adopté la technique du margin-bottom à 95%... Mais ça reste "bidouillesque" à mon sens.

A votre avis ? Smiley ohwell
Modifié par Nigel (08 Jun 2007 - 09:35)
Hello Smiley smile

Tu as jeté un oeil sur la FAQ ?

Mise en page de 100% de hauteur avec des parties fixes
Page qui prend toute la hauteur peu importe le contenu
Appliquer une hauteur de 100% à un élément

Et sur ce tuto ?

Page sur toute la hauteur de la fenêtre, avec pied de page en bas

Bon courage Smiley cligne

EDIT : J'ai relu ton post, si tu appliques une marge en bas de ton conteneur principal ça devrait le faire non ?

HTML
<body>

     <div id="global">
     </div>

</body>

CSS
#global {
...
margin-bottom:10px; }

Modifié par BeliG (08 Jun 2007 - 10:51)
a écrit :

Et sur ce tuto ?

Page sur toute la hauteur de la fenêtre, avec pied de page en bas

Bon courage Smiley cligne

Yep !
Je pense que ceci devrait être un bon élément de réponse ^^
J'vais regarder ça de plus prêt ! Merci l'ami Smiley cligne


a écrit :

EDIT : J'ai relu ton post, si tu appliques une marge en bas de ton conteneur principal ça devrait le faire non ?

HTML
<body>

     <div id="global">
     </div>

</body>

CSS
#global {
...
margin-bottom:10px; }


Nope car mon conteneur principal est "body" ^^
Ah oui j'aime chercher les difficultés, hein ;p
C'est plus rigolo ^^, en tant que formateur, je n'ai pas le choix... Smiley cligne
Modifié par Nigel (08 Jun 2007 - 11:11)
Sujet clos
Aller à