Comment faire en sorte qu'une div remplisse un espace horizontal restant?
https://stackoverflow.com/questions/1032914
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai 2 divs: un à gauche et un à droite de ma page. Celui du côté gauche a une largeur fixe et je veux que celui du côté droit remplisse l’espace restant.
#search {
width: 160px;
height: 25px;
float: left;
background-color: #ffffff;
}
#navigation {
width: 780px;
float: left;
background-color: #A53030;
}<div id="search">Text</div>
<div id="navigation">Navigation</div>
La solution
Cela semble accomplir ce que vous recherchez.
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
Autres conseils
Le problème que j'ai trouvé avec la réponse de Boushley est que si la colonne de droite est plus longue que la gauche, elle se contente de tourner à gauche et de reprendre de remplir tout l'espace. Ce n'est pas le comportement que je cherchais. Après avoir parcouru de nombreuses "solutions", j'ai trouvé ce didacticiel génial sur la création de trois colonnes pages.
L’auteur propose trois manières différentes, une largeur fixe, une avec trois colonnes variables et une autre avec des colonnes extérieures fixes et une largeur moyenne. Beaucoup plus élégant et efficace que d'autres exemples que j'ai trouvés. Amélioration significative de ma compréhension de la mise en page CSS.
En gros, dans le cas simple ci-dessus, faites flotter la première colonne à gauche et donnez-lui une largeur fixe. Ensuite, donnez à la colonne de droite une marge gauche un peu plus large que la première colonne. C'est tout. Terminé. Code de Ala Boushley:
Voici une démonstration de extraits de pile & amp; jsFiddle
#left {
float: left;
width: 180px;
}
#right {
margin-left: 180px;
}
/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}<div id="left"> left </div>
<div id="right"> right </div>
Dans l'exemple de Boushley, la colonne de gauche contient l'autre colonne à droite. Dès que la colonne de gauche se termine, la droite commence à remplir à nouveau tout l'espace. Ici, la colonne de droite s'aligne simplement plus loin dans la page et la colonne de gauche occupe sa grosse marge. Aucune interaction de flux nécessaire.
La solution provient de la propriété display.
Fondamentalement, vous devez faire en sorte que les deux div agissent comme des cellules de tableau. Ainsi, au lieu d'utiliser float: left , vous devrez utiliser display: table-cell sur les deux divs, et pour le div en largeur dynamique, vous devez définir . width: auto; également. Les deux divs doivent être placés dans un conteneur de 100% de largeur avec la propriété display: table .
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 HTML:
<div class="container">
<div id="search"></div>
<div id="navigation"></div>
</div>
IMPORTANT: pour Internet Explorer, vous devez spécifier la propriété float dans la largeur dynamique div, sinon l'espace ne sera pas rempli.
J'espère que cela résoudra votre problème. Si vous le souhaitez, vous pouvez lire l’article complet que j’ai écrit à ce sujet sur mon blog .
Comme cette question est plutôt populaire, je suis enclin à partager une solution intéressante avec BFC.
Exemple Codepen du suivant .
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
Dans ce cas, overflow: auto déclenche le comportement du contexte et oblige le bon élément à développer uniquement jusqu'à la largeur restante disponible. Il sera naturellement étendu à toute la largeur si .left disparaît. Une astuce très utile et propre pour de nombreuses dispositions d'interface utilisateur, mais peut-être difficile à comprendre le "pourquoi ça marche" au début.
Ces jours-ci, vous devriez utiliser la méthode flexbox (peut être adapté à tous les navigateurs avec un préfixe de navigateur).
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
Plus d'infos: https://css-tricks.com/ extraits / css / guide-to-flexbox /
Si vous n'avez pas besoin de compatibilité avec les anciennes versions de certains navigateurs (par exemple, IE 10 8 ou inférieur), vous pouvez utiliser la fonction CSS calc () :
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
float: left;
width: calc(100% - 180px);
background-color:#00FF00;
}
@ La réponse de Boushley était la plus proche, mais il y a un problème non traité qui a été signalé. La div right occupe toute la largeur du navigateur; le contenu prend la largeur attendue. Pour mieux voir ce problème:
<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>
Le contenu est au bon endroit (dans Firefox), mais sa largeur est incorrecte. Lorsque les éléments enfants commencent à hériter de la largeur (par exemple, le tableau avec width: 100% ), ils reçoivent une largeur égale à celle du navigateur, ce qui les déborde de la droite de la page et crée une barre de défilement horizontale ( dans Firefox) ou ne pas flotter et être poussé vers le bas (en chrome).
Vous pouvez résoudre ce problème facilement en ajoutant overflow: hidden à la colonne de droite. Cela vous donne la largeur correcte pour le contenu et le div. De plus, la table recevra la largeur correcte et remplira la largeur restante disponible.
J'ai essayé certaines des solutions ci-dessus, elles ne fonctionnaient pas complètement avec certains cas Edge et étaient trop compliquées pour justifier leur résolution. Cela fonctionne et c'est simple.
S'il y a des problèmes ou des préoccupations, n'hésitez pas à les soulever.
Voici un petit correctif pour la solution acceptée, qui empêche la colonne de droite de tomber sous la colonne de gauche. width: 100%; remplacé par overflow: hidden; , solution délicate 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/
[edit] Vérifiez également un exemple de disposition en trois colonnes: http://jsfiddle.net/MHeqG/3148/
Utiliser 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>
La réponse de Boushley semble être la meilleure voie à suivre pour organiser cela avec des flotteurs. Cependant, ce n'est pas sans problèmes. Le flottement imbriqué dans l'élément développé ne sera pas disponible; cela cassera la page.
La méthode illustrée ci-dessous "fait semblant d'être faux" s’agissant de l’élément en expansion, il ne s’agit pas vraiment de flottement, il joue simplement avec les éléments flottants de largeur fixe en utilisant ses marges.
Le problème est donc précisément que: l'élément en expansion n'est pas flottant. Si vous essayez d’avoir des éléments flottants imbriqués dans l’élément en expansion, ceux-ci sont "imbriqués". les éléments flottants ne sont pas vraiment imbriqués; lorsque vous essayez de coller un clear: both; sous votre " imbriqué " objets flottants, vous finirez par effacer également les flotteurs de niveau supérieur.
Ensuite, pour utiliser la solution de Boushley, j'aimerais ajouter que vous devez placer un div comme celui-ci: .fakeFloat { hauteur: 100%; largeur: 100%; float: gauche; } et placez ceci directement dans la division étendue; tout le contenu de la div développée devrait alors aller dans cet élément fakeFloat.
Pour cette raison, je vous recommande d'utiliser des tableaux dans ce cas particulier. Les éléments flottants ne sont pas vraiment conçus pour l'expansion que vous souhaitez, alors que la solution utilisant une table est triviale. On dit généralement que le fait de flotter est plus approprié pour les mises en page, mais pas pour les tableaux. Mais vous n'utilisez pas de flottant ici, vous le faîtes - mon humble avis.
J'ai essayé les solutions ci-dessus pour une gauche liquide, et une droite fixe mais aucune d'entre elles n'a fonctionné (je suis conscient que la question est à 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>
J'ai eu un problème similaire et j'ai trouvé la solution ici: https://stackoverflow.com/a/16909141/3934886
La solution concerne les colonnes à centre fixe et côté liquide.
.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 souhaitez une colonne de gauche fixe, modifiez simplement la formule en conséquence.
Si vous essayez de remplir l'espace restant dans une flexbox entre 2 éléments, ajoutez la classe suivante à un div vide entre les 2 que vous souhaitez séparer:
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
Vous pouvez utiliser les propriétés CSS de la grille, c'est la manière la plus claire, claire et intuitive de structurer vos boîtes.
#container{
display: grid;
grid-template-columns: 100px auto;
color:white;
}
#fixed{
background: red;
grid-column: 1;
}
#remaining{
background: green;
grid-column: 2;
}<div id="container">
<div id="fixed">Fixed</div>
<div id="remaining">Remaining</div>
</div>
Je me demande si personne n'a utilisé position: absolu avec position: relatif
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;
}
/ * * 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>
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;}
J'ai eu un problème similaire et suis venu avec ce qui suit 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 ne s’encapsulera pas lorsque la fenêtre sera réduite, mais développera automatiquement la zone "contenu". Il conservera une largeur statique pour le menu du site (à gauche).
Et pour la boîte de contenu à expansion automatique et la boîte verticale de gauche (menu du site) démo:
Essayez d'ajouter la position relative , supprimez les propriétés width et float du côté droit, puis ajoutez left et Propriété right avec une valeur 0 .
De plus, vous pouvez ajouter la règle margin left avec la valeur basée sur la largeur de l'élément de gauche (+ quelques pixels si vous avez besoin d'espace entre) pour conserver sa position .
Cet exemple fonctionne 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;
}
.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;
}<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
</div
Essayez ceci. Cela a fonctionné pour moi.
Je travaille sur ce problème depuis deux jours et j'ai une solution qui peut fonctionner pour vous et tous ceux qui essaient de créer une largeur fixe réactive à gauche et que le côté droit remplisse le reste de l'écran sans entourer le côté gauche. côté. Je suppose que l’intention est de rendre la page sensible dans les navigateurs ainsi que sur les appareils mobiles.
Voici le code
// 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()+" "+'width: '+$rightwidthPosition+" "+'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()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
/* End test lines these can be deleted */
}
if( $thePageRefreshed == true ){
$thePageRefreshed = false;
}
}/* 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;
}<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 peut fonctionner pour vous comme il l’a fait pour moi. https://jsfiddle.net/Larry_Robertson/62LLjapm/
L'élément de table html rend ceci par défaut ... Vous définissez la largeur de la table, les colonnes s'étendant sur toute la largeur de la table. Le reste concerne l'imagination
Règles pour les objets et les conteneurs;
Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}
Utilisez espace-blanc: nowrap; pour les textes des derniers éléments pour leur déstructuration.
Item X% | Item Y% | Item Z%
Longueur totale toujours = 100%!
si
Item X=50%
Item Y=10%
Item z=20%
puis
Élément X = 70%
L'élément X est dominant (les premiers éléments sont dominants dans la présentation CSS du tableau)!
Essayez la propriété max-content; de div inside pour étendre div dans le conteneur:div[class="item"] {
...
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
...
}
J'ai rencontré le même problème en essayant de disposer certaines commandes jqueryUI . Bien que la philosophie commune actuelle soit "d'utiliser DIV au lieu de TABLE ", j'ai constaté que l'utilisation de TABLE fonctionnait beaucoup mieux. En particulier, si vous avez besoin d'un alignement direct entre les deux éléments (centrage vertical, centrage horizontal, etc.), les options disponibles dans TABLE offrent des commandes simples et intuitives à cet effet.
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>
new to css. Mais j'ai résolu ce problème en utilisant inline-block. consultez cette page: http://learnlayout.com/inline-block.html
