HTML/CSS: Comment faire de la barre latérale et le contenu suivre les uns les autres

J'ai besoin d'une barre latérale et une zone de contenu. Je veux avoir la même hauteur pour les deux sections. Donc, si je veux spécifier une couleur de fond pour la barre latérale, il suivra la zone de contenu, même si la barre latérale du contenu ne sont pas aussi grande que la section du contenu et vice versa. Je veux faire cela en pur HTML et CSS, donc pas de trucs javascript.

Vous pouvez le faire sans javascript: matthewjamestaylor.com/blog/...
Éviter les phrases complexes.
Ouais, 20 fois le montant du html ou du code de style, et une garantie que vous allez travailler sur cette partie pour les jours à essayer de comprendre pourquoi il ne fonctionne pas dans certains navigateurs quand une balise de table a été construite exactement pour ce problème...
Ce n'est pas optimale, car elle implique inutile imbriquée <div> éléments et certains assez laid CSS astuces, mais c'est mieux que Chis la table de base de la solution.
Le <table> élément n'a pas été conçu pour résoudre ce problème. Il a été construit pour afficher des données tabulaires.

OriginalL'auteur Adam | 2010-07-07

  1. 1

    Le seul vrai moyen de faire cela dans un navigateur croix de la mode est avec des tables.

    Que le contenu est ajouté à la barre latérale de la cellule ci-dessous, elle force l'ensemble de la ligne de développement, lequel, à son tour, va forcer le contentArea de la cellule à s'élargir. Vous pouvez le style de ceux individuellement avec les css.

    <style>
  #sideBar { vertical-align:top;}
  #contentArea { vertical-align:top;}
</style>
<table>
  <tr>
    <td id="sideBar">SideBar</td>
    <td id="contentArea">content area</td>
  </tr>
</table>
    Oui je sais cela aussi, mais par exemple quand j'écris plus de contenu sur la barre latérale de la partie contenu sera sur le milieu de la page, je veux dire dans le milieu de la barre latérale. Ou je fais quelque chose de mal?
    essayez de <td valign="top">
    Voir la mise à jour. si vous appliquez un vertical-align: top pour les cellules, alors le contenu s'aligne sur le haut de la cellule.
    Ne pas le faire. Les Tables sont pour des données tabulaires, pas layouting.
    Je suis un développeur back-end, mais dès que je suis en train de faire quelque côté projet qui me force à l'avant-end j'ai immédiatement prendre cette décision. À mon avis, les deux choix sont vraiment moche. À l'aide de toutes sortes de fou hacks et de la complexité qui me fait vraiment grincer des dents. À l'aide d'une construction pour quelque chose, il ne s'agit pas pour me fait grincer des dents. En fin de compte, j'ai toujours l'impression d'aller pour la table. Il est peut-être moche, mais au moins il est mort simple à comprendre et dure environ cinq secondes à mettre en œuvre. De toute façon, c'est la raison pour laquelle je préfère extrémité arrière de codage - même apparemment simple, les choses ont guerres de religion ici.

    OriginalL'auteur NotMe

  2. 4

    Cet excellent article sur Une Liste à Part construit une telle mise en page à partir de zéro, et contient également des liens intéressants vers d'autres articles sur le sujet, comme Faux Colonnes (également sur ALA).

    Merci pour votre astuce aussi, une technique intéressante.

    OriginalL'auteur You

  3. 0

    Fondamentalement, il suffit de régler la hauteur de la barre latérale pour être à 100% et il suivra le parent de l'élément de hauteur. Dans l'exemple ci-dessous son de l'élément conteneur. Peu importe, il est de la hauteur, de la barre latérale, la hauteur sera de 100% et, par conséquent, toujours être à la même hauteur du conteneur.

    <div id="wrapper">
  <div id="container">
      <div id="sidebar"></div>
  </div>
</div>

<style>
#wrapper {}
#container {min-height:500px;}  (or whatever you want for the height)
#sidebar {height:100%;}
</style>

    OriginalL'auteur MistaPrime