CSS: deux colonnes (fixe/fluide) - même hauteur

Quelle est la meilleure façon de faire cette chose simple?CSS: deux colonnes (fixe/fluide) - même hauteur

colonne de gauche, largeur fixe, fond disent jaune
colonne principale, reste de l'écran

colonne principale contiendra le texte d'une longueur indéfinie, et je veux que la colonne de gauche pour être aussi élevée comme le principal, peu importe ce que le contenu est. Pas d'en-tête, pas de pied de page, juste l'écran divisé en deux mais le gauche doit remplir tout l'espace que prend la main. Pas de javascript.

Merci.

EDIT: cela peut-il être fait (configuration de base) sans tours comme des images d'arrière-plan ou des valeurs marginales absurdes? J'essaie de passer de l'approche de la table méprisée, mais jusqu'à présent, je vois que les mises en page CSS seulement nécessitent toujours une certaine tricherie, même pour faire les choses les plus faciles.

Source

2009-11-23 Matteo Riva

cela devrait être déplacé sur doctype.com, non? –

@Josh Pearce: Alors que doctype.com fait partie de la Ligue de Justice, il n'est pas directement intégré à la famille de sites StackOverflow. Nous ne pouvons donc pas le déplacer ici. –

Donc, fondamentalement, la réponse à la question «peut-il être fait sans astuces» est: n °

Source

2009-12-04 11:48:36

Source

2009-11-23 18:01:40 powtac

J'ai généralement deux divs: l'externe contiendra le contenu de la barre latérale que je veux avoir la même hauteur que la colonne principale, et div interne serait la colonne principale.

----------------------------- 
|  -------------------- | 
|  |     | | 
|  |     | | 
|  |     | | 
|  -------------------- | 
-----------------------------

De cette façon, la div intérieure/principale force la div extérieure/sidebar être la même hauteur que la principale/intérieure. Juste float:right le div interne/principal, définissez le div externe/sidebar pour être width:100%, et spécifiez que le div interne/principal a une marge de gauche, pour permettre la barre latérale, par exemple. margin-left:20%.

<div class="outer"> 
    <div class="inner"> 
    --main content-- 
    </div> 
    --sidebar content-- 
</div>

Mise à jour: désolé, j'ai eu le contenu de la barre latérale montré au mauvais endroit. Il devrait être en dessous de le div interne/principal de sorte que le div interne/principal apparaît à côté de lui à la droite quand il est flottant. Exemple CSS:

div.outer { 
    width: 100%; 
} 

div.inner { 
    margin-left: 20%; /* width of sidebar */ 
    float: right; 
}

Source

2009-11-23 18:08:54

Vous ne pouvez pas obtenir ceci pour montrer ce que j'ai besoin, pouvez-vous fournir un exemple de la feuille de style? –

Je pense que vous voudriez ajouter: hauteur: 100%; Pour div.inner aussi bien. – Kzqai

Je doute que cela fonctionne. La largeur = 100% va pointer la div externe en dessous de l'intérieur.Vous aurez besoin de plus que cela. – dland

Voici une maquette QUICK. La colonne principale se remplit horizontalement lorsque vous l'utilisez. Vous pouvez définir la largeur de la colonne principale si vous connaissez déjà la largeur de la colonne de gauche.

<html> 
<head> 
<style> 
#leftCol 
{ 
width:350px; 
height:100%; 
float:left; 
background-color:#FFFF33; 
} 
#mainCol 
{ 
width:53%; 
height:100%; 
float:left; 
background-color:#CC0033; 
} 
#wrapper 
{ 
width:100%; 
} 
.clearFix 
{ 
clear:both; 
} 
</style> 
</head> 

<body> 
<div id="wrapper"> 
<div id="leftCol">tfgsrrtgrt 

</div> 
<div id="mainCol">gtrgdrtgthdyhtyhtyhydthtr 

</div> 
<div class="clearFix"></div> 
</div> 
</body> 
</html>

Espérons que cela fonctionne pour vous.

Source

2009-11-23 20:23:40 tahdhaze09

notez que si la largeur du navigateur est restreinte, mainCol s'enroulera sous leftCol, ce qui peut être indésirable – dland

Correct. J'ai oublié ça. Ensuite, nous aurons besoin d'une min-largeur quelque part ... Peut-être dans #wrapper ou #mainCol? – tahdhaze09

CSS: deux colonnes (fixe/fluide) - même hauteur

Répondre

Questions connexes