Disposition de fluide CSS?

J'ai une question rapide à propos de comment configurer ma disposition fluide de base. J'ai une barre d'en-tête 40px haute, et 100% large en haut, cela semble très bien.Disposition de fluide CSS?

Puis j'ai un div #left et #right, chacun flottant respectivement. Cela a l'air cool. Ils ont tous deux une hauteur de 100% qui fonctionne très bien mais le problème est la page qui fait défiler 40px vers le bas, car il y a 40px dans la barre d'en-tête ... si j'utilise une mise en page fluide pour l'en-tête sur une résolution minuscule ou très grande.

Des idées?

Voici mon CSS

body 
{ 
    background: #ebebeb; 
    margin: 0; 
    padding: 0; 
    min-width: 750px; 
    max-width: 1500px; 
} 
#wrap 
{ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 
#header 
{ 
    background: #414141; 
    height: 40px; 
    width: 100%; 
} 
#sidebar 
{ 
    width: 30%; 
    background: #ebebeb; 
    height: 100%; 
    float: left; 
} 
#rightcontent 
{ 
    width: 70%; 
    background: #fff; 
    height: 100%; 
    float: right; 
} 
#footer 
{ 
    width: 100%; 
    background: #414141; 
    height: 40px; 
    clear: both; 
}

Et voici ma page html:

<body> 
<div id="wrap"> 
    <div id="header"> 
     head 
    </div> 
    <div id="sidebar"> 
     side 
    </div> 
    <div id="rightcontent"> 
     right 
    </div> 
    <div id="footer"> 
     footer 
    </div> 
</div> 
</body>

Est-ce que l'aide :)

Source

2010-01-16 tarnfeld

height: 100%; est une chose difficile pour les pages web, comme vous êtes sans doute profondément conscient. En regardant votre code dans Firefox 3.5.7, les colonnes #sidebar et #rightcontent ont seulement la hauteur d'environ em - juste assez pour contenir le texte que vous y mettez, pas la longueur de page entière que vous espériez. Les colonnes essaient de calculer le pourcentage de hauteur à partir de la hauteur explicite de leur parent, mais #wrap a également une hauteur basée sur%, ce qui provoque l'échec (au moins dans mon Firefox). Maintenant, comme vous l'avez décrit (les colonnes étant à la bonne hauteur, à l'exception d'un scroll supplémentaire de 40px), ce qui semble se passer, c'est que quel que soit le navigateur que vous utilisez, la hauteur totale est #wrap de c'est parent, qui est <body>. Donc, naturellement, lorsque vos colonnes sont dimensionnées à la hauteur de <body>, qui contient également la hauteur de votre en-tête et pied de page, les colonnes sont trop grandes. Une astuce que j'ai utilisée plusieurs fois pour obtenir l'apparence de longueur de page complète des colonnes qui s'adapte à toutes les dimensions de la page est de coller une balise position: fixed; bottom: 0px;<div> en bas de ma page avec juste assez de balisage à l'intérieur pour imiter la structure et CSS pertinentes des colonnes.

Voici ce que je l'ai fait à votre page pour obtenir cet effet:

<!--Add this to your HTML--> 
<div id='columnfooter'> 
<div id='sidecont'></div> 
    <div id='rightcont'></div> 
</div>

/* And modify your CSS like this */ 
#sidebar, div#sidecont { 
    width: 30%; 
    background: #ebebeb; 
    float: left; 
} 

#rightcontent, div#rightcont { 
    width: 70%; 
    background: #fff; 
    float: right; 
} 

div#rightcont, div#sidecont { 
height:100%; 
} 

#footer { 
    width: 100%; 
    background: #414141; 
    height: 40px; 
    position: relative; 
    bottom: 0px; 
} 

div#columnfooter { 
position: fixed; 
z-index: -25; 
bottom: 40px; 
height: 100%; 
background: #ebebeb; 
width: 100%; 
}

Oui, en utilisant le code HTML pour former des colonnes de fond vide de cette façon ne mélange genre de sémantique et stylistique balisage - un non-technique Mais le CSS est clairement extrait du HTML, et avec ce code j'ai des colonnes de pleine page, #footer en bas (même quand plus d'une page de contenu est ajoutée à l'une des colonnes au-dessus), et il se comporte de la même manière versions de Firefox, Safari, Opera, Chrome et IE8 à toute résolution (testé jusqu'à 800x600).

Espérons que cela aide!

Source

2010-01-17 11:39:50 Impirator

Hé, bonne correction! Bien que je ne l'ai pas utilisé à la fin car j'ai utilisé javascript pour garder cela, et quelques autres choses en perspective comme l'utilisateur redimensionne la fenêtre et ainsi de suite ... je sais que cela peut causer des problèmes avec les navigateurs non-js mais reste de l'application web est très lourd JS donc j'ai des problèmes de navigateur non-js en place déjà :-) – tarnfeld

Répondre

Questions connexes