Comment faire un div remplir un espace horizontal?

J'ai 2 divs: l'un à gauche et un à droite de ma page. Celui de gauche a une largeur fixe et je veux la une de la côté droit pour remplir l'espace restant.

CSS:

    #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #ffffff;
    }
    #navigation {
        width: 780px;
        float: left;  
        background-color: #A53030;
    }

HTML:

<div id="search">Text</div>
<div id="navigation">Navigation</div>

Supprimer la largeur et la propriété float sur le #de navigation et il va fonctionner.
connexes stackoverflow.com/questions/4873832/...
vous pourriez vouloir mettre à jour votre réponse choisie à celui fourni par Hank
en fait, si vous regardez mystrdat de réponse, je pense que c'est encore mieux. C'est une seule ligne de css et c'est la seule qui a fonctionné pour moi (je suis en train de faire trois colonnes avec float:left; sur les deux premiers avec des largeurs fixes et overflow:auto sur le dernier et il fonctionne très bien)
juste assez. En fait, il semble utiliser la même technique que la réponse que j'ai fournie pour stackoverflow.com/questions/4873832/...
Découvrez ma réponse quelques lignes ci-dessous. La réponse est: pour combiner float: left et overflow hidden. Cela va vous donner le vrai "remplir l'espace restant sur le comportement de la colonne de droite.
En 2018, flex est souvent la meilleure façon d'aller. Voir @Jordan réponse ci-dessous - stackoverflow.com/a/25117686/846727

InformationsquelleAutor alexchenco | 2009-06-23

61

Ce qui semble accomplir ce que vous allez pour.

CSS:
```
#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}
```
HTML:
```
<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>
```
- Vous devez supprimer les width: 100% sur le droit de la div mais pour le faire fonctionner.
- J'ai juste copier et coller le code d'une page que j'ai testé sur... les travaux de 100%.
- Au moins dans google chrome, il n'.
- Cette solution a effectivement un problème. Essayez de retirer la couleur de la GAUCHE de l'élément. Vous remarquerez la couleur à partir de la DROITE de l'élément est en fait caché sous le. Le contenu semble aller au bon endroit, mais le DROIT de la div en lui-même ne l'est pas.
- Quel navigateur utilisez-vous, et de voir que le comportement?
- +1 Résolu mon problème aussi. Ce que j'ai appris que je devais enlever "float: left" sur le remplissage de la div. Je pensais que rendrait la page d'imploser
- Peut-être bon de remarquer que Vyroteks remarque est vrai, mais peut être résolu avec overflow:hidden dans la colonne de droite. Denzel mentionne, mais, ce n'est pas la accepté de répondre, de sorte que vous risquez de rater ça...
- Cela est tout simplement faux, le droit de l'élément a plein de taille, tout son contenu sont flottaient autour de la gauche de l'élément. Ce n'est pas une solution, juste un peu plus de confusion.
- Ce chiffre se décompose si #de droite est plus élevé que la #gauche. Voir jsfiddle.net/MHeqG/2044
- "overflow:hidden" ne m'aide PAS sur Chrome.
- overflow: auto; est ce que nous avons besoin de: jsfiddle.net/MHeqG/2497
- Pour résoudre le problème @Vyrotek est de décrire, il suffit d'ajouter overflow: hidden pour la #gauche et retirez width: 100% à partir de #droit.
- -1: ajouter "border: solid jaune 5px" à #right et vous verrez qu'il ne prend pas le reste de l'espace requis par l'o.p., il prend toute la largeur et apparaît seulement pour le travail, parce #left au-dessus de lui et le pousse #rights contenu de la route.
- Pour les personnes qui n'ont pas lu les réponses: j'ai décrit une meilleure solution que d'être acceptées d'une case à quelques réponses ci-dessous.
- c'est de la triche ^^
- ne fonctionne pas pour moi
InformationsquelleAutor Boushley
253

Le problème que j'ai trouvé avec Boushley la réponse est que si la colonne de droite est plus longue que celle de gauche, il va juste s'enrouler autour de la gauche et de reprendre remplissant tout l'espace. Ce n'est pas le comportement que je cherchais. Après une recherche par le biais de beaucoup de "solutions", j'ai trouvé ce génial tutoriel sur la création de trois colonne de pages.

L'auteur de l'offre de trois façons différentes, l'une largeur fixe, une avec trois colonnes variables et on fixe les colonnes extérieures et d'une largeur variable moyen. Beaucoup plus élégant et plus efficace que les autres exemples que j'ai trouvé. Considérablement amélioré ma compréhension de la mise en page CSS.

Pour l'essentiel, dans le cas simple ci-dessus, le flotteur de la première colonne à gauche et à lui donner une largeur fixe. Donner ensuite la colonne de droite de gauche de la marge qui est un peu plus large que la première colonne. C'est tout. Fait. Ala Boushley code:

Voici une démo en Pile Extraits de & jsFiddle

CSS:
```
#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}
```
HTML:
```
<div id="left">  left  </div>
<div id="right"> right </div>
```
Avec Boushley l'exemple de la colonne de gauche tient l'autre colonne à droite. Dès que la colonne de gauche se termine le droit commence à remplir l'ensemble de l'espace à nouveau. Ici la colonne de droite aligne simplement plus loin dans la page et la colonne de gauche occupe c'est une grosse grosse marge. Pas de flux d'interactions nécessaires.
- Lorsque vous fermez la balise div, le contenu après que la div doit être affiché dans une nouvelle ligne, mais qui n'est pas le cas. Pouvez-vous expliquer pourquoi?
- devrait être:margin-left: 190px; vous avez oublié ';'. Aussi à la marge de gauche doit être 180px.
- Merci, fixe le point-virgule. J'ai trouvé que j'ai préféré, ou nécessaire, certains excès de la marge entre les colonnes de faire la page de ressembler à ce que je voulais. Mais je suis sûr que c'est une question de goût et de design. Sujet de votre question: peut-être l'élément en question a besoin de quelque chose comme clear:both; dans son CSS. Parce que la colonne de gauche est flottant, de nouveaux éléments apparaissent à côté plutôt qu'au-dessous, sauf si vous leur donnez de la propriété clear.
- En outre, j'ai trouvé que si vous voulez ajouter, disons 16 pixels de padding-left sur le droit div, vous avez réellement besoin d'augmenter le droit div's margin-left par 16 pixels, et garder le padding-left trop! (Il ne fonctionne pas sauf si vous avez tous les deux!)
- margin-left est la clé pour résoudre ce problème - merci Hank, été JsFiddling ma propre incarnation de cette énigme!
- Remarque: si vous souhaitez que la largeur fixe de l'élément sur la droite, assurez-vous de placer en premier dans le code ou il sera poussé à la ligne suivante, de toute façon.
- Si vous essayez d'inverser l'ordre (je veux dire à largeur fixe sur la droite et prendre à gauche, on utilise le reste) il y a un problème ici: jsfiddle.net/CSbbM/127
- le flottant élément(s) devrait venir avant le pas flottant dans votre code html. jsfiddle.net/CSbbM/127
- Alors, comment faites-vous cela si vous voulez éviter une largeur fixe? En d'autres termes, permettre à la colonne de gauche pour être aussi large qu'elle doit être, et la colonne de droite pour prendre le reste?
InformationsquelleAutor Hank
123

La solution vient de l'affichage de la propriété.

Fondamentalement, vous avez besoin de faire les deux divs agissent comme des cellules d'un tableau. Donc, au lieu d'utiliser float:left, vous aurez à utiliser display:table-cell sur les deux divs, et pour la dynamique de la largeur de la div, vous devez définir le width:auto; aussi. Les deux divs doit être placée dans un 100% de la largeur du conteneur avec la display:table propriété.

Voici le css:
```
.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}
```
Et le code HTML:
```
<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>
```
IMPORTANT:Pour Internet Explorer, vous devez spécifier le flotteur de la propriété de la dynamique de la largeur de la div, sinon l'espace ne sera pas rempli.

J'espère que cela va résoudre votre problème.
Si vous le souhaitez, vous pouvez lire l'intégralité de l'article que j'ai écrit à ce sujet sur mon blog.
- Ne fonctionne pas lorsque le contenu à l'intérieur de la div avec une largeur de:auto est plus grande que le reste de l'espace disponible dans la fenêtre d'affichage.
- Tout comme avec J. Peterson suggestion, vous ne devez PAS utiliser les tables de la conception sauf si son contenu est en fait le tableau de données. Cette suggestion devrait avoir beaucoup plus de moins de votes.
- cette solution ne permet pas l'utilisation de tables, et je suis conscient que les tableaux doivent être utilisés uniquement pour des données tabulaires. Donc, est hors contexte ici. Tables réelles et display:table(+d'autres): variation de propriétés sont des choses complètement différentes.
- Frentiu, dans lequel les moyens n'display:table différer du produit réel de l'élément de tableau? Je voudrais vraiment savoir si elles sont deux choses complètement différentes, je vous remercie. =)
- l'aide de tableaux HTML implique la définition de l'ensemble de la structure de la table dans le code HTML. Le CSS modèle de table vous permet de faire presque n'importe quel élément se comporter comme un élément de la table sans la définition de l'ensemble de la table de l'arbre.
- Frentiu, merci pour la réponse. Mais n'est-ce pas le comportement de l'élément de la table de la moitié du problème, avec l'aide de tables comme des éléments de conception?
- J'ai souffert d'un problème où la dynamique de la largeur de div n'assument pas les bonnes dimensions, jusqu'à ce que j'ai combiné l'utilisation de min-width & max-width avec la valeur souhaitée. Voir le commentaire que j'ai ajouté à la réponse du code. Cette résolu pour moi, dans un cas de test avec 2 vide divs. Sinon -- grande réponse! Merci.
- -1: NE PAS utiliser des tableaux pour la mise en page. Je ne crois pas qu'il soit, mais vous NE pouvez pas régler la hauteur d'une table - si le contenu se développe au-delà de votre layour limites alors le tableau fait trop, en ignorant complètement toute tentative de contraindre à l'aide de overflow:hidden.
InformationsquelleAutor Mihai Frentiu
99

Puisque c'est plutôt une question populaire, je suis enclin à partager une belle solution à l'aide de BFC.

Codepen échantillon de la suite ici.
```
.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}
```
Dans ce cas, overflow: auto déclenche contexte comportement et permet à la droite de l'élément de développer seulement à la largeur restante et il va naturellement étendre à la totalité de la largeur si .left disparaît. Très utile et propre truc pour beaucoup de mises en page de l'INTERFACE utilisateur, mais peut-être difficile de comprendre le "pourquoi ça marche" au premier abord.
- Prise en charge du navigateur pour le débordement. IE4!!! w3schools.com/cssref/pr_pos_overflow.asp
- Parfois, je me retrouve avec un inutile barre de défilement horizontale sur le .bon élément. Quel est le problème?
- Pouvez-vous faire un codepen ou similaire de l'affaire? Débordement de auto peut déclencher qu'en fonction de son contenu. Vous pouvez également utiliser tout autre dépassement de la valeur pour obtenir le même effet, hidden peut fonctionner mieux pour votre cas.
- Qu'est-BFC, et est-il un bon tutoriel expliquant BFC sur le web?
- il est synonyme de bloc de mise en forme contexte. Voici plus approfondie de explication
- Est-il un moyen de faire ce travail si c'est la div sur le côté droit qui est de largeur fixe? Simplement en déplaçant float: left de l'ERS div comme float: right et overflow: auto de la LHS div dans le Codepen exemple ne fonctionne pas.
- Juste changer le flotteur de left à right devrait fonctionner hors de la boîte. Le flottait élément doit venir en premier dans les DOM.
- Merci, mais cette méthode est assez rigides en dehors de la simple usecases. Je pense que l'utilisation d'un flexbox pile avec flex-grow: 1 sur l'enfant qui doit être extensible à être une meilleure solution générique.
InformationsquelleAutor mystrdat
98

Ces jours-ci, vous devez utiliser le flexbox méthode (peut être adapté à tous les navigateurs avec un navigateur préfixe).
```
.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}
```
Plus d'infos: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Voir http://www.w3schools.com/cssref/css3_pr_flex-grow.asp pour une bonne explication de l'attribut CSS. Une simple solution moderne, mais peut ne pas fonctionner dans les anciens navigateurs.
- Flexbox FTW ... j'ai essayé toutes les autres solutions dans ce fil, rien ne fonctionne, j'ai essayer cette flexbox solution, il fonctionne tout de suite ... classique CSS (c'est à dire avant l'avènement de flexbox et grille css) totalement suce à la mise en ... de flex et de la grille de la règle 🙂
- Ce devrait être acceptée comme la solution retenue pour les temps actuels. Aussi, il est le seul "non-hackish" solution.
InformationsquelleAutor Jordan
21

Si vous n'avez pas besoin de compatibilité avec les anciennes versions de certains navigateurs (IE 10 8 ou moins, par exemple), vous pouvez utiliser le calc() fonction CSS:
```
#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}
```
- IE 9 et de soutien calc attribut. Le seul problème avec cette solution est peut-être que nous ne connaissons pas la largeur de la colonne de gauche ou de changement.
- eh bien, cette solution est peut-être orienté vers un flexible de cas, et en supposant que vous ne savez pas ou vous n'avez pas de soins de la largeur du conteneur parent. À la question de @alexchenco dit qu'il voulait remplir "l'espace restant" alors... je pense est valide 🙂 et oui, c'est à dire 9 est également pris en charge, merci pour la remarque 😉
InformationsquelleAutor Marcos B.
15

@Boushley réponse était la plus proche, il reste cependant un problème qui n'est pas traitée qui a été souligné. Le droit div prend toute la largeur du navigateur, le contenu a l'attendu de la largeur. Voir ce problème mieux:
```
<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>
```
http://jsfiddle.net/79hpS/

Le contenu est à la bonne place (dans Firefox), toutefois, la largeur incorrect. Lorsque les éléments enfants de début d'hériter de la largeur (par exemple, la table avec width: 100%) ils sont d'une largeur égale à celle du navigateur, causant un débordement de la droite, en dehors de la page et de créer une barre de défilement horizontale (dans Firefox) ou de ne pas flotter et d'être poussé vers le bas (dans chrome).

Vous pouvez résoudre ce facilement en ajoutant overflow: hidden de la colonne de droite. Cela vous donne la bonne largeur pour à la fois le contenu et la div. En outre, la table recevrez la bonne largeur et de remplir le reste de la largeur disponible.

J'ai essayé quelques autres solutions ci-dessus, ils ne travaillent pas pleinement avec certains cas de bord et ont été tout simplement trop alambiqué pour mandat de les fixer. Cela fonctionne, et c'est simple.

Si il y a des problèmes ou des préoccupations, n'hésitez pas à les élever.
- overflow: hidden en effet résout ce, je vous remercie. (L'marqué réponse est fausse BTW comme right prend tout l'espace disponible sur le parent, vous pouvez les voir dans tous les navigateurs lors de l'inspection des éléments)
- Quelqu'un peut-il expliquer pourquoi cela fonctionne exactement? Je sais que j'ai vu une bonne explication quelque part ici, mais je n'arrive pas à le trouver.
- Réglage overflow: hidden met la colonne de droite dans son propre bloc de mise en forme de contexte. Les éléments de bloc occuper tout l'espace horizontal disponible pour eux. Voir: developer.mozilla.org/en-US/docs/Web/Guide/CSS/...
- Le overflow:xxx attribut est la clé. Comme vous le dites, il s'arrête #right de l'expansion de sous #left. Très soigneusement résout un problème que j'ai à l'aide de jQuery UI resizable - avec #right ensemble avec un trop plein d'attributs et de #left définir comme redimensionnable, vous disposez d'une simple mobiliers limite. Voir jsfiddle.net/kmbro/khr77h0t.
InformationsquelleAutor Denzel

Voici un petit correctif pour la solution retenue, qui empêche la colonne de droite de tomber sous la colonne de gauche. Remplacé width: 100%; avec overflow: hidden; un délicat solution, si quelqu'un ne le savait pas.

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[modifier] vérifiez Aussi un exemple pour les trois colonnes de mise en page:
http://jsfiddle.net/MHeqG/3148/

Solution parfaite pour flexible barre de navigation fixe avec logo.

InformationsquelleAutor Dariusz Sikorski

Utilisation display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>

Cette réponse doublons Jordanie, en réponse à partir de 2014.

InformationsquelleAutor Ildar Zaripov

3

Boushley la réponse semble être la meilleure voie à suivre pour pouvoir le faire à l'aide de flotteurs. Cependant, il n'est pas sans ses problèmes. Imbriquée flottant à l'intérieur de l'élément développé ne sera pas disponible pour vous, elle casse la page.

La méthode indiquée fondamentalement des "faux" quand il s'agit de l'expansion de l'élément - il n'est pas réellement flottant, c'est juste de jouer avec la largeur fixe flottait éléments à l'aide de ses marges.

Le problème ensuite, c'est exactement cela: l'expansion de l'élément n'est pas évoquée. Si vous essayez d'avoir toutes les flottants à l'intérieur de l'expansion de l'élément, ceux qui sont "imbriqués" flotté éléments ne sont pas vraiment imbriquée à tous; lorsque vous essayez de coller une clear: both; sous votre "imbriqués" flotté éléments, vous finirez par compensation de haut-niveau de la flotte ainsi.

Ensuite, pour utiliser Boushley la solution, je tiens à ajouter que vous devez placer une div telles que les suivantes:
.fakeFloat
{
hauteur: 100%;
width: 100%;
float: left;
}
et les place directement au sein de l'élargissement de la div; tous l'élargissement de la div du contenu devrait aller ensuite à l'intérieur de cette fakeFloat élément.

Pour cette raison, je vous recommande d'utiliser les tableaux dans ce cas précis. Flottait éléments ne sont pas vraiment conçu pour faire de l'extension que vous souhaitez, alors que la solution à l'aide d'un tableau est trivial. Un argument est généralement fait que le flottant est plus approprié pour la mise en page, pas de tables.. mais vous ne l'utilisez pas flottant ici de toute façon, vous êtes semblant - et ce genre de défaites le but de la stylistique argument pour ce cas précis, à mon humble avis.
- Ne pas utiliser des tableaux pour la mise en page. Vous ne pouvez pas régler leur hauteur. Elles se développent à tenir leur contenu, et ils n'ont pas l'honneur de débordement.
- Ne pas utiliser des tableaux pour la mise en page parce que le contenu et l'affichage doivent être séparés. Mais si le contenu est structuré comme un tableau, il peut certainement être coupées, avec overflow: hidden. jsfiddle.net/dave2/a5jbpc85
InformationsquelleAutor chinchi11a
3

J'ai essayé les solutions ci-dessus pour un reste de liquide, et un fixe droit, mais non de leur travail (je suis conscient que la question est pour l'inverse, mais je pense que c'est pertinent). Voici ce qui a fonctionné:
```
.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>
```
InformationsquelleAutor Dominic
3

J'ai eu un problème similaire et j'ai trouvé la solution ici:
https://stackoverflow.com/a/16909141/3934886

La solution, c'est d'un centre fixe div et liquide colonnes latérales.
```
.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}
```
Si vous voulez un fixe de la colonne de gauche, il suffit de changer la formule en conséquence.
- Non disponible sur certains navigateurs plus anciens comme IE8 et partiellement sur IE9 (caniuse.com/#feat=calc)
InformationsquelleAutor alex351
3

Si vous essayez de remplir l'espace restant dans un flexbox entre 2 éléments, ajouter la classe suivante à une div vide entre les 2 vous souhaitez vous séparer:
```
.fill {
  //This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}
```
InformationsquelleAutor Helzgate

Vous pouvez utiliser la Grille des propriétés CSS, est le plus clair, propre et intuitive, la structure de vos boîtes.

CSS:

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}

HTML:

<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>

InformationsquelleAutor colxi

Je me demande ce que personne n'utilisait position: absolute avec position: relative

Donc, une autre solution serait:

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

Jsfiddle exemple

InformationsquelleAutor Buksy

/*
* les css
*/

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/*
* html
*/

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

InformationsquelleAutor user1700099

J'ai une solution très simple pour cela !
//HTML

<div>
<div id="left">
    left
</div>
<div id="right">
    right
</div>

//CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

Lien: http://jsfiddle.net/MHeqG/

InformationsquelleAutor iamatsundere181

J'ai eu un problème similaire et est venu avec la suivante qui a bien fonctionné

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

Cette méthode de ne pas envelopper lorsque la fenêtre est diminué, mais s'auto développer le contenu de la zone. Il se conserve une largeur statique pour le site (menu sur la gauche).

Et d'auto élargir le contenu de la boîte et à gauche de la boîte verticale(menu du site) démonstration:

https://jsfiddle.net/tidan/332a6qte/

InformationsquelleAutor Tidan

Essayer d'ajouter de la position relative, supprimer width et float propriétés de la droite, puis ajouter left et right propriété avec 0 valeur.

Vous pouvez également ajouter des margin left règle avec la valeur est basée sur la gauche de l'élément de largeur (+ quelques pixels si vous avez besoin d'espace entre les deux) de maintenir sa position.

Cet exemple est de travailler pour moi:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

InformationsquelleAutor KeepMove

CSS:

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}

HTML:

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

De l'essayer. Il a travaillé pour moi.

InformationsquelleAutor Spoorthi

J'ai travaillé sur ce problème depuis deux jours et avoir une solution qui peut fonctionner pour vous et personne d'autre d'essayer de faire un réactif de largeur Fixe gauche et le côté droit de remplir le reste de l'écran sans enrouler autour du côté gauche. L'intention, je suppose, est de faire la page de réactif dans les navigateurs ainsi que les dispositifs mobiles.

Voici le Code

JS:

//Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
//The delay time below is needed to insure that the resize happens after the window resize event fires
//In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
fixRightSideWidth();
$('.right_content_container').show(600);
}, 50);
//Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
fixRightSideWidth();
});
function fixRightSideWidth(){
$blockWrap = 300; //Point at which you allow the right div to drop below the top div
$normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; //The -20 forces the right block to fall below the left
if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
$('.right_content_container').width( $normalRightResize );
$('.right_content_container').css("padding-left","0px");
/* Begin test lines these can be deleted */
$rightrightPosition = $('.right_content_container').css("right");
$rightleftPosition = $('.right_content_container').css("left");
$rightwidthPosition = $('.right_content_container').css("width");
$(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
/* End test lines these can be deleted */
}
else{
if( $('.right_content_container').width() > 300 ){
$('.right_content_container').width(300);
}
/* Begin test lines these can be deleted */
$rightrightPosition = $('.right_content_container').css("right");
$rightleftPosition = $('.right_content_container').css("left");
$rightwidthPosition = $('.right_content_container').css("width");
$(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
/* End test lines these can be deleted */
}
if( $thePageRefreshed == true ){
$thePageRefreshed = false;
}
}

CSS:

/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
min-width: 310px;
background: #333;
min-height:100vh;
}
body{
background: #333;
background-color: #333;
color: white;
min-height:100vh;
}
.top_title{
background-color: blue;
text-align: center;
}
.bottom_content{
border: 0px;
height: 100%;
}
.left_right_container * {
position: relative;
margin: 0px;
padding: 0px;
background: #333 !important;
background-color: #333 !important;
display:inline-block;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
font-size: 14px;
font-weight: 400;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
border-radius: 0;
box-sizing: content-box;
transition: none;
}
.left_navigator_item{
display:inline-block;
margin-right: 5px;
margin-bottom: 0px !important;
width: 100%;
min-height: 20px !important;
text-align:center !important;
margin: 0px;
padding-top: 3px;
padding-bottom: 3px;
vertical-align: top;
}
.left_navigator_items {
float: left;
width: 150px;
}
.right_content_container{
float: right;
overflow: visible!important;
width:95%; /* width don't matter jqoery overwrites on refresh */
display:none;
right:0px;
}
.span_text{
background: #eee !important;
background-color: #eee !important;
color: black !important;
padding: 5px;
margin: 0px;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
<div class="left_right_container">
<div class="left_navigator_items">
<div class="left_navigator_item">Dashboard</div>
<div class="left_navigator_item">Calendar</div>
<div class="left_navigator_item">Calendar Validator</div>
<div class="left_navigator_item">Bulletin Board Slide Editor</div>
<div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
<div class="left_navigator_item">TV Guide</div>
</div>
<div class="right_content_container">
<div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.
Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.
Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.
Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.
In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
</div>
</div>
</div>

Voici mon violon qui peuvent travailler pour vous comme il l'a fait pour moi.
https://jsfiddle.net/Larry_Robertson/62LLjapm/

InformationsquelleAutor Larry Robertson

0

html de l'élément de tableau fait par défaut... à Vous de définir la largeur de la table puis les colonnes seront toujours couvrent toute la largeur de la table. Le reste n'est que de l'imagination

InformationsquelleAutor Botea Florin
0

Règles pour les éléments et les conteneurs;
```
Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}
```
Utilisation white-space: nowrap; pour les textes dans les derniers articles pour leur undestructuring.

Élément De X% | Élément De Y% | Élément De Z%

Longueur totale toujours = à 100%!

si
```
Item X=50%
Item Y=10%
Item z=20%
```
puis

Élément X=70%

Élément X est dominante (premiers éléments sont dominants dans le tableau de mise en page CSS)!

Essayer max-contenu; propriété pour les div à l'intérieur pour la diffusion de div dans le conteneur:
```
div[class="item"] {
...
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
...
```
}

InformationsquelleAutor Dmytro Yurchenko
-2

J'ai rencontré ce même problème en essayant de mise en page de certains jqueryUI contrôles. Bien que la philosophie commune est aujourd'hui "l'utilisation DIV au lieu de TABLE", j'ai trouvé dans mon cas, à l'aide de la TABLE travaillé beaucoup mieux. En particulier, si vous avez besoin d'avoir de simple alignement dans les deux éléments (par exemple, centrage vertical, horizontal centrage, etc.) les options disponibles avec le TABLEAU de donner des commandes simples et intuitives pour cela.

Voici ma solution:
```
<html>
<head>
<title>Sample solution for fixed left, variable right layout</title>
<style type="text/css">
#controls {
width: 100%;
}
#RightSide {
background-color:green;
}
</style>
</head>
<body>
<div id="controls">
<table border="0" cellspacing="2" cellpadding="0">
<TR>
<TD>
<button>
FixedWidth
</button>
</TD>
<TD width="99%" ALIGN="CENTER">
<div id="RightSide">Right</div>
</TD>
</TR>
</table>
</div>
</body>
</html>
```
- Vous ne devriez jamais, jamais, jamais utiliser des tableaux pour la mise en forme, mais rien de données tabulaires. JAMAIS.
- Le problème avec les tableaux, c'est que le rendu sera trompeuse si ce que vous essayez d'afficher n'est pas destiné à être données tabulaires. Si vous choisissez de négliger le principe de balisage porteur de sens, vous pourriez aussi bien obtenir de nouveau à <font>, <b>, etc. HTML évolué passé que de se concentrer moins sur la présentation.
- Je ne sais pas pourquoi tout le monde capote sur les tables. Parfois, ils sont utiles.
- Vous ne pouvez pas régler la hauteur d'une table. Si le contenu est plus grand que ne sorte de la table. Et il n'a pas d'honneur overflow.
- voir Mihai Frentiu réponse à une explication. Le but entier de CSS est de séparer le contenu de l'apparence. À l'aide des propriétés comme display:table pour obtenir l'apparence souhaitée de non-tableaux de données est propre. Forcer non des données tabulaires, comme les colonnes de la page ou de contrôles de formulaire en HTML, les tableaux de contrôle de la mise en page est impur.
InformationsquelleAutor J. Peterson
-2

de nouvelles feuilles de style css. Mais j'ai résolu ce problème en utilisant inline-block. check this out: http://learnlayout.com/inline-block.html

InformationsquelleAutor Bobo

Vous devez vous connecter pour publier un commentaire.