Comment faire en sorte qu'une div remplisse un espace horizontal restant?
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>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>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 s'enroulera simplement autour de la gauche et reprendra de remplir tout l'espace. Ce n'est pas le comportement que je cherchais. Après une recherche dans de nombreuses "solutions", j'ai trouvé ce tutoriel génial sur la création de pages de trois colonnes.
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.
Fondamentalement, 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é. Le code d'Ala Boushley:
Voici une démo dans Stack Snippets & 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 vient 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 vous devez également définir width:auto; pour la largeur dynamique div. 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 de Nice utilisant BFC.
Échantillon Codepen de la suivante ici .
.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 s'étendra naturellement à la largeur totale si .left disparaît. Une astuce très utile et propre pour de nombreuses dispositions d'interface utilisateur, mais peut-être difficile de comprendre le "pourquoi ça marche" au début.
Ces jours-ci, vous devriez utiliser la méthode flexbox (peut être adaptée à 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/snippets/css/a-guide-to-flexbox/
Si vous n’avez pas besoin de compatibilité avec les anciennes versions de certains navigateurs (IE dix 8 ou moins par exemple), 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 qui n'a pas été abordé et qui a été signalé. Le right div 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), cependant, la 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 flotte pas et est poussée (en chrome).
Vous pouvez corriger ceci 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 boîtiers 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 une petite solution pour la solution acceptée, qui empêche la colonne de droite de tomber sous la colonne de gauche. Remplacé width: 100%; par overflow: hidden;, une 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/
Utilisez 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 à l'aide de flotteurs. Cependant, ce n'est pas sans problèmes. Le flottement imbriqué dans l'élément développé ne sera pas disponible; ça va casser la page.
La méthode montrée fondamentalement "fait semblant" en ce qui concerne l'élément en expansion - il n'est pas réellement flottant, il joue simplement avec les éléments flottants à largeur fixe en utilisant ses marges.
Le problème est donc exactement cela: l'élément en expansion n'est pas flottant. Si vous essayez d'avoir un élément flottant imbriqué dans l'élément en expansion, ces éléments flottants "imbriqués" ne sont pas vraiment imbriqués; Lorsque vous essayez de coller un clear: both; sous vos éléments flottants "imbriqués", vous finissez également par effacer les flottants de niveau supérieur.
Ensuite, pour utiliser la solution de Boushley, je voudrais ajouter que vous devez placer une division telle que celle-ci: .fakeFloat { hauteur: 100%; largeur: 100%; float: left; } 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 tables dans ce cas particulier. Les éléments flottants ne sont pas vraiment conçus pour réaliser l’extension souhaitée, 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 simulez - et ce genre de fait va à l’encontre de l’argument stylistique de ce cas mon humble avis.
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 voulez 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;
}
J'ai essayé les solutions ci-dessus pour une gauche liquide et une droite fixe mais aucune d'entre elles n'a fonctionné (je sais que la question est pour le contraire 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>
/* * 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>
Règles pour les objets et les conteneurs;
Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}
Utilisez white-space: 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
Item X = 70%
L'élément X est dominant (les premiers éléments sont dominants dans la présentation CSS du tableau)!
Essayez max-content; propriété de div inside pour la propagation de div en conteneur:
div[class="item"] {
...
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
...
}
Je travaille sur ce problème depuis deux jours et j'ai une solution qui peut fonctionner pour vous et toute autre personne essayant de créer une largeur fixe réactive gauche et de laisser le côté droit remplir le reste de l'écran sans envelopper le côté gauche. Je suppose que l’intention est de rendre la page réactive dans les navigateurs ainsi que 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/
Je me demande que personne n'a utilisé 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;
}
Vous pouvez utiliser les propriétés CSS de la grille, 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>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;}
Essayez d’ajouter la position relative, retirez les propriétés width et float du côté droit, puis ajoutez les propriétés left et right avec la valeur 0.
En outre, vous pouvez ajouter la règle margin left dont la valeur est 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;
}
J'ai eu un problème similaire et est 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'emballe pas lorsque la fenêtre est réduite, mais étend automatiquement la zone de "contenu". Il gardera une largeur statique pour le menu du site (à gauche).
Et pour la boîte de contenu en expansion automatique et la boîte de démonstration verticale de gauche (menu du site):
.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>
</divEssaye ça. Cela a fonctionné pour moi.
l'élément de table html rend ceci par défaut ... Vous définissez la largeur de la table, puis les colonnes couvrent toujours toute la largeur de la table. Le reste concerne l'imagination