<div id="sidebar">sidebar</div> <div id="content">content</div> The sidebar is a fixed width of 100px. How do I make the width of content to 100% of the browser width?http://jsfiddle.net/chickendance/qQQTU/1/
3 Réponses :
Vous pouvez le faire avec SIMPLE CSS:
* {
/* reset */
margin: 0;
padding: 0;
}
html,
body {
/* for demo purposes only */
height: 100%;
}
#wrapper {
/* for demo purposes only */
background: rgba(200, 200, 200, 0.6);
height: 100%;
}
#sidebar {
float: left;
width: 100px;
/* for demo purposes only */
background: rgba(200, 200, 200, 0.6);
height: 50%;
}
#content {
margin-left: 100px;
/* for demo purposes only */
background: rgba(200, 200, 200, 0.9);
height: 50%;
}
Bon sang, tu m'as battu en quelques secondes!
@watson :) Je gagne un de temps en temps.
Cela fonctionne, merci. Mais #debar et #Content existent tous les deux à l'intérieur #wrapper. Pour une raison quelconque, la largeur de #Content s'étend sur le passé #wrapper d'environ 200px, provoquant apparaître des barres de défilement horizontales.
@Stevedolan Pouvez-vous publier les HTML et CSS pertinents?
Pourquoi le flotteur: gauche; avait besoin?
Le float: gauche; supprime la barre latérale du flux de la page, permettant au contenu div pour être placé à la même décalage comme la barre latérale. Ajout du Margin-gauche: 100px; empêche le contenu de se chevaucher dans la barre latérale.
Vous devez jouer avec la largeur% comme le reste de nous:
#content {
background: green;
float: left;
width: 75%;
}
Changez simplement vos propriétés #Content à ceci:
#content {
background: green;
float: left;
width: 100%;
margin-right: -200px;
}
Vous pouvez utiliser le
CALC () Fonction , par exempleLargeur: Calc (100% - 200px) car les largeurs des deux premiers éléments sont fixes. jsfiddle.net/qqqtu/3 .. bien que son non pris en charge dans IE 8 et ci-dessous.+1 pour me présenter à cette sorcière
D'accord! J'ai toujours voulu que CSS fasse cela. Je ne savais pas qu'ils faisaient cela arriver. Soigné!