28172 sujets

CSS et mise en forme, CSS3

Mise en page sur trois colonnes avec height:100%;

Bonjour,
J'ai une mise une mise en page avec 2 colonnes fixes et une prend toute la largeur de la page (width:100%).
Je voudrais aussi avoir un height:100% pour les colonnes. J'ai ajouter dans #table et/ou #gauche:
- background:url(ft.png);repeat -y;
ou
- height:100%;

mais ca marche pas, et je ne vois pas pourquoi...
Je vous laisse le code au cas ou :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        <title>Layout en 3 colonnes</title> 
        <style type="text/css"> 
            body {} 
             
            #titre {background:red;} 
     
            #contenu {} 
     
            #table{display:table;width:100%; height:100%;}
     
            #gauche { 
                display:table-cell; 
                width:200px;
		background:green;
            } 
     
            #milieu { 
                display:table-cell; 
		background:yellow;
            } 
     
            #droit { 
                display:table-cell; 
                width:200px; 
                background:green; 
            } 
 
            #pied {
		background:grey;
	    }
 
        </style> 
    </head> 
 
    <body> 
        <div id="contenu"> 
            <div id="titre">Bandeau</div> 
            <div id="table"> 
                <div id="gauche">Mon menu gauche.</div> 
                <div id="milieu">Lorem ipsum elit.</div> 
                <div id="droit">Mon menu droit qui peut être éventuellement supprimé.</div> 
            </div> 
            <div id="pied">Pied de page</div> 
        </div> 
    </body> 
</html>

Modifié par pierr75 (14 Mar 2011 - 16:11)
1) Je ne vois pas trop pourquoi tu souhaite avoir un height à 100% a part pour avoir une mise en page dont la hauteur est limitée par le navigateur. (Cette hauteur ne sera pas la même pour tout le monde, selon le navigateur et selon la résolution)

Car si tu parviens a avoir un height:100%, si jamais ton contenu dépasse la taille du navigateur, il sera soit coupé et impossible a voir, soit tu aura une barre de défilement, ce qui reviendrait à ne pas mettre de height du tout et laisser le contenu ajuster la hauteur tout seul.

2) Ca me parraît difficile étant donné que tu as du contenu au dessus et en dessous de ton "tableau". Quelle place vont-ils avoir si tu donne 100% de hauteur au tableau ?
Modifié par Tetranima (15 Mar 2011 - 15:21)
Sujet clos
Aller à