Comment créer un fixe largeur de la barre latérale et pleine largeur de contenu
Je veux créer une page avec barre latérale et le contenu. La barre latérale fixe width(200px)
et le contenu devrait être
(body_width - largeur de la barre latérale)
. Créé en jQuery et fonctionne parfaitement.
Modifier
Mais je veux savoir, est-ce possible de le faire en CSS?
Vous pouvez tricher avec
haha... sympa.. merci. Mais est-il un autre moyen?
Vous pouvez supprimer la largeur et de flotter, mais qui, normalement, cause plus de problèmes qu'elle n'en résout. Autres que que, non, désolé. Mais
Ohh.. Merci @Andy pour votre réponse.
Pas de prob, dites-moi si vous souhaitez me faire entièrement formé de répondre à fermer la question
display:table
: jsfiddle.net/WSgwp/5haha... sympa.. merci. Mais est-il un autre moyen?
Vous pouvez supprimer la largeur et de flotter, mais qui, normalement, cause plus de problèmes qu'elle n'en résout. Autres que que, non, désolé. Mais
display: table
n'est pas aussi mauvais que vous le pensez, il n'est pas à l'aide du tableau de balisage, une simple copie de la façon dont le navigateur traite un td
élémentOhh.. Merci @Andy pour votre réponse.
Pas de prob, dites-moi si vous souhaitez me faire entièrement formé de répondre à fermer la question
OriginalL'auteur Mifas | 2012-11-21
Vous devez vous connecter pour publier un commentaire.
Vous pouvez faire cela en utilisant
display: table;
sur la div contenant et puisdisplay: table-cell;
sur l'intérieure de la vrd. Vous pouvez ensuite appliquer un minimum la largeur de la barre latérale et le contenu prendra le reste de la page.Une démo peut être trouvé ici
Ne laissez pas l'utilisation de
display: table
vous mettre hors ce n'est pas à l'aide de tableaux, de marquer ou de faire votre html moins sémantique. Il s'agit simplement de faire votre navigateur traiter la div comme il le ferait d'une cellule de tableau (ce qui est exactement ce dont vous avez besoin)HTML:
CSS:
display: table
et contre une autre solutions?C'est impossible pour utiliser
box-shadow
avec cette solution.La zone d'ombre est de travailler sur votre violon, c'est à peine recouvert par le jaune div... supprimer
background: yellow;
et vous verrez.pas le dev de chrome — prntscr.com/k8dvo. Quel est votre navigateur?
Vous avez eu de la zone d'ombre, cachés derrière les jaune div... cliquez ici jsfiddle.net/WSgwp/17 et de cesser de me harceler quand vous avez tort.
OriginalL'auteur Andy
Hey, vous pouvez obtenir de votre choix avec de la pure css de donner la
margin-left:200px;
à votre#content
CSS
DÉMO
OriginalL'auteur Shailender Arora
Vous pouvez essayer d'utiliser la marge négative.
explication complète et exemple (avec démonstration):
https://shellcreeper.com/responsive-fixed-width-sidebar-why-and-how/
HTML:
CSS:
OriginalL'auteur David Chandra Purnama
vous pouvez le faire avec du css, il suffit de retirer la largeur et le flotteur de #contenu.
Vérifier la jsFiddle Fichier
son travail bien alors que je redimensionner la fenêtre.. car il n'y a pas toute la largeur "#contenu"
OriginalL'auteur Roy Sonasish