recherche sur le net pendant les heures passées pour trouver une solution à cela, mais je ne pouvais pas le trouver, alors je suis ici.
J'ai besoin de la largeur du de sorte que le div pour être 100% moins la largeur du gauche div .
div à gauche reste la même largeur (390px) mais l'autre div ajuste sa taille en fonction de la résolution. J'ai trouvé la solution où il a une largeur fixe div des deux côtés, mais je ne peux pas comprendre cela.
5 Réponses :
Il n'y a vraiment pas un moyen de faire cela avec droit de la CSS tout de suite dans les navigateurs autres Firefox (voir le MDN Docs ). Vous pouvez utiliser JavaScript pour faire de même, mais je vous suggère de repenser votre mise en page.
EDIT: En réalité, c'est-à-dire que 9 peut le gérer également, voir MSDN Docs . Yay pour IE?
Hey, merci d'avoir répondu. La chose est que le site Web ait un twitter comme la mise en page. Un panneau gauche pouvant être défilé et celui qui montre le contenu, de repenser la mise en page n'est pas possible.
Ce type de calcul n'est actuellement pas pris en charge dans CSS (certainement pas dans le chrome 12 / Ubuntu 11.04), mais il existe une fonction (ci-dessus pris directement à partir du w3.org .) My propres tests (exhaustifs) montrent: le Les résultats ci-dessus ont été obtenus à l'aide des navigateurs nommés et un CSS html: CSS: (Si quelqu'un aimerait exécuter le test ci-dessus dans les navigateurs sur leur plate-forme et fournir les résultats, ou les modifier à cette réponse, ce serait Comme indiqué, par Claireesuzy , dans Commentaires: [Prenez] Regard sur CaniUtilise Cela fonctionne dans Firefox et, en effet, dans Firefox 5 (Ubuntu 11.04), il fonctionne (les autres préfixes du fournisseur ne semblent rien faire pour Opera ou WebKit, cependant; tristement): Référence: Calc () définie dans CSS 3, ce qui permettrait cela. Type de comportement, utilisant des fonctions mathématiques simples: Calc () Démo , le code dont le code est ci-dessous: .
largeur: -MOZ-Calc () mais c'est à peu près tout;)
Jetez un coup d'œil à CaniUtilise Cela fonctionne dans Firefox si Vous utilisez largeur : -moz-calc () mais c'est à peu près tout;)
Solution simple:
div#content {
float: right;
width: 100%;
}
div#content .padder {
margin-left: 330px;
padding: 0 30px 0 0;
}
div#sidebar {
float: left;
width: 300px;
margin-top: -30px;
padding-left: 30px;
margin-right: -330px;
}
Vous ne pouvez pas avoir 2 id dans html
Bien sûr, vous ne pouvez pas avoir deux identifiants qui sont les mêmes.
<div id="left">...</div>
<div id="content">...<br> more content</div>
#left {float: left; width: 390px; background: #f76922;}
#content {overflow: hidden; background: #eee;}
float the left div and make a new block formatting context out of the right div (overflow: hidden is one way to do that), that way it will take the remaining spaceExample Fiddle
Peut-être que cela n'est pas directement lié à la question, mais j'ai eu un problème similaire pour organiser des articles dans une liste. L'élément à largeur fixe est à droite de chaque élément. J'ai réussi à résoudre cela avec l'approche suivante. L'idée est d'équilibrer un positif de remplissage code> avec un margin-gauche code>, tandis que la largeur est définie sur 100% code>: .item {
max-height: 40px;
}
.item-title {
display: inline-block;
height: 40px;
width: 100%;
margin-left: -70px;
padding-left: 65px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* This one should be fixed-width. */
.item-params {
width: 60px;
height: 40px;
float: right;
}
Vous savez, la boîte orange ... TF2, Portal ..
CSS a un nouveau modèle de boîte: le modèle Orange Box
Désolé les gars. Pour ajouter une photo, mais ma réputation n'est pas assez élevée.