Comment puis-je faire deux colonnes proportionnelles en HTML/CSS où la colonne de gauche suit l'utilisateur pendant qu'elles défilent?

Question

Je veux une disposition à deux colonnes où les deux colonnes sont proportionnelles en taille les unes aux autres et ne se chevaucheront pas. La colonne de gauche a seulement un peu de contenu en haut et devrait défiler vers le bas avec la page (flotter avec la page pendant qu'elle défile vers le bas.) La colonne de droite aura beaucoup de données et n'aura pas de barre de défilement , le navigateur fera défiler la page. Donc je veux combiner les deux exemples ci-dessous afin que lorsque la police est redimensionnée et que le contenu change, les colonnes restent proportionnelles comme dans l'exemple 2, mais j'ai aussi besoin du contenu du côté gauche pour suivre l'utilisateur écran pendant qu'ils défilent pour voir toute la colonne 2 (comme dans l'exemple 1).

S'il vous plaît voir l'exemple ici pour voir ce dont je parle:

http://vershok.com/test_layout_20090610.html

J'ai mis à jour l'exemple avec un calendrier JQuery UI dans la div gauche pour montrer comment la position: fixé; Les modèles ne sont pas redimensionnés la correclty colonne de droite (le calendrier JQuery a des problèmes parce qu'il sort de son div.)

http://vershok.com/test_layout2_20090610.html

Je veux une mise en page à deux colonnes où les deux colonnes sont proportionnelles à taille à l'autre et ne se chevaucheront pas. La colonne de gauche a seulement un peu de contenu en haut et devrait défiler vers le bas avec la page (flotter avec la page pendant qu'elle défile vers le bas.) La colonne de droite aura beaucoup de données et n'aura pas de barre de défilement , le navigateur fera défiler la page.

Answer 1

Si vous utilisez DIVs pour diviser la page, vous pouvez obtenir cet effet, comme suit:

<div style='position: fixed;width: 20%;'> 
    Text for the left column. 
    Should scroll down the page 
</div> 
<div style='float: right; width: 80%;'> 
    *insert large content here. including table content if you want.* 
</div> 

Answer 2

Un élément avec position:fixed est essentiellement un élément absolument positionné, positionné par rapport à la fenêtre du navigateur. Cela signifie qu'il est supprimé du flux du document et n'affecte pas la façon dont les éléments avant ou après sont positionnés (ou dimensionnés). C'est pourquoi votre colonne de gauche ne change pas de largeur lorsque l'élément de position fixe est trop large.

Vous devez savoir que ie6 ne prend pas en charge position:fixed et revient par défaut à position:static. IE7 ne prend en charge que position:fixed si vous utilisez un doctype strict.