Come fare un div riempire uno spazio orizzontale rimanente?
https://stackoverflow.com/questions/1032914
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Ho 2 div: uno nella parte sinistra e uno nella parte destra della mia pagina. Quello sul lato sinistro ha una larghezza fissa e voglio che quello sul lato destro riempia lo spazio rimanente.
#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>
Soluzione
Questo sembra realizzare ciò che stai cercando.
#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>
Altri suggerimenti
Il problema che ho riscontrato con la risposta di Boushley è che se la colonna di destra è più lunga di quella di sinistra, avvolgerà semplicemente la sinistra e riprenderà a riempire l'intero spazio. Questo non è il comportamento che stavo cercando. Dopo aver cercato molte "soluzioni", ho trovato questo fantastico tutorial sulla creazione di tre colonne pagine.
L'autore offre tre diversi modi, uno a larghezza fissa, uno a tre colonne variabili e uno a colonne esterne fisse e una larghezza variabile al centro. Molto più elegante ed efficace di altri esempi che ho trovato. Significativamente migliorata la mia comprensione del layout CSS.
Fondamentalmente, nel caso semplice sopra, fai galleggiare la prima colonna a sinistra e assegnale una larghezza fissa. Quindi assegna alla colonna a destra un margine sinistro leggermente più largo della prima colonna. Questo è tutto. Fatto. Codice di Ala Boushley:
Ecco una demo in Stack Snippet & 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>
Nell'esempio di Boushley la colonna di sinistra tiene l'altra colonna a destra. Non appena la colonna di sinistra finisce, la destra inizia a riempire di nuovo l'intero spazio. Qui la colonna di destra si allinea semplicemente ulteriormente alla pagina e la colonna di sinistra occupa il suo grande margine di grasso. Non sono necessarie interazioni di flusso.
La soluzione proviene dalla proprietà display.
Fondamentalmente devi far agire le due div come celle di tabella. Quindi invece di usare float: left , dovrai usare display: table-cell su entrambi i div, e per il div di larghezza dinamica devi impostare larghezza: auto; anche. Entrambi i div devono essere posizionati in un contenitore di larghezza del 100% con la proprietà display: table .
Ecco il 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;}
E l'HTML:
<div class="container">
<div id="search"></div>
<div id="navigation"></div>
</div>
IMPORTANTE: per Internet Explorer è necessario specificare la proprietà float sul div di larghezza dinamica, altrimenti lo spazio non verrà riempito.
Spero che questo risolva il tuo problema. Se vuoi, puoi leggere l'articolo completo che ho scritto a riguardo su il mio blog .
Dato che questa è una domanda piuttosto popolare, sono propenso a condividere una bella soluzione usando BFC.
Esempio di codepen del seguente qui .
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
In questo caso, overflow: auto attiva il comportamento contestuale e fa espandere l'elemento giusto solo alla larghezza rimanente disponibile e si espanderà naturalmente a tutta larghezza se .left scompare. Un trucco molto utile e pulito per molti layout dell'interfaccia utente, ma forse difficile da capire il motivo per cui funziona " all'inizio.
Al giorno d'oggi, dovresti usare il metodo flexbox (può essere adattato a tutti i browser con un prefisso del browser).
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
Ulteriori informazioni: https://css-tricks.com/ snippets / css / a-guida-to-FlexBox /
Se non è necessaria la compatibilità con le versioni precedenti di alcuni browser (ad esempio IE 10 8 o meno), è possibile utilizzare la funzione CSS calc () :
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
float: left;
width: calc(100% - 180px);
background-color:#00FF00;
}
La risposta di @ Boushley è stata la più vicina, tuttavia c'è un problema non risolto che è stato sottolineato. Il div right occupa l'intera larghezza del browser; il contenuto assume la larghezza prevista. Per vedere meglio questo problema:
<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>
Il contenuto è nella posizione corretta (in Firefox), tuttavia la larghezza non è corretta. Quando gli elementi figlio iniziano a ereditare la larghezza (ad esempio la tabella con larghezza: 100% ) viene assegnata una larghezza uguale a quella del browser, causando il trabocco a destra della pagina e la creazione di una barra di scorrimento orizzontale ( in Firefox) o non fluttuare ed essere spinto verso il basso (in Chrome).
Puoi risolvere questo facilmente aggiungendo overflow: nascosto nella colonna di destra. Questo ti dà la larghezza corretta sia per il contenuto che per il div. Inoltre, la tabella riceverà la larghezza corretta e riempirà la larghezza rimanente disponibile.
Ho provato alcune delle altre soluzioni di cui sopra, non hanno funzionato completamente con alcuni casi limite ed erano semplicemente troppo contorti per giustificare la loro riparazione. Funziona ed è semplice.
Se ci sono problemi o preoccupazioni, sentiti libero di risolverli.
Ecco una piccola correzione per la soluzione accettata, che impedisce alla colonna di destra di cadere sotto la colonna di sinistra. Sostituito larghezza: 100%; con overflow: nascosto; una soluzione complicata, se qualcuno non lo sapesse.
<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/
[modifica] Controlla anche un esempio per il layout a tre colonne: http://jsfiddle.net/MHeqG/3148/
Usa 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 risposta di Boushley sembra essere il modo migliore per organizzare questa operazione usando i float. Tuttavia, non è privo di problemi. Il mobile nidificato all'interno dell'elemento espanso non sarà disponibile; romperà la pagina.
Il metodo mostrato sostanzialmente "lo falsifica" quando si tratta dell'elemento espandibile - in realtà non è mobile, sta solo giocando con gli elementi mobili a larghezza fissa usando i suoi margini.
Il problema è quindi esattamente questo: l'elemento espandibile non è mobile. Se provi ad avere un annidato mobile all'interno dell'elemento espandibile, quelli "annidati" gli oggetti fluttuati non sono nidificati; quando provi a mettere un clear: both; sotto il tuo " nidificato " oggetti fluttuati, finirai per cancellare anche i galleggianti di livello superiore.
Quindi, per usare la soluzione di Boushley, vorrei aggiungere che dovresti inserire un div come il seguente: .fakeFloat { altezza: 100%; larghezza: 100%; galleggiante: a sinistra; } e posizionalo direttamente all'interno del div espanso; tutti i contenuti del div espanso dovrebbero quindi rientrare in questo elemento fakeFloat.
Per questo motivo, consiglierei di usare le tabelle in questo caso specifico. Gli elementi fluttuanti in realtà non sono progettati per eseguire l'espansione che desideri, mentre la soluzione che utilizza una tabella è banale. In genere si argomenta che il floating è più appropriato per i layout, non per le tabelle .. ma non si utilizza comunque il floating qui, lo si sta falsificando - e quel tipo di sconfigge lo scopo dell'argomento stilistico per questo caso specifico, in la mia modesta opinione.
Ho provato le soluzioni di cui sopra per una sinistra liquida e una destra fissa ma non ha funzionato (sono consapevole che la domanda è per il contrario, ma penso che sia pertinente). Ecco cosa ha funzionato:
.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>
Ho avuto un problema simile e ho trovato la soluzione qui: https://stackoverflow.com/a/16909141/3934886
La soluzione è per un div centro fisso e colonne laterali 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;
}
Se desideri una colonna sinistra fissa, modifica la formula di conseguenza.
Se stai cercando di riempire lo spazio rimanente in una flexbox tra 2 elementi, aggiungi la seguente classe a un div vuoto tra i 2 che vuoi separare:
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
Puoi usare le proprietà Grid CSS, è il modo più chiaro, pulito e intuitivo di strutturare le tue scatole.
#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>
Mi chiedo che nessuno abbia usato position: absolute con position: relative
Quindi, un'altra soluzione sarebbe:
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>
Ho una soluzione molto semplice per questo! // 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;}
Ho avuto un problema simile e ho pensato a quanto segue che ha funzionato bene
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>
Questo metodo non andrà a capo quando la finestra è ridotta ma espanderà automaticamente l'area del "contenuto". Manterrà una larghezza statica per il menu del sito (a sinistra).
E per la casella di contenuto ad espansione automatica e la casella verticale sinistra (menu del sito) demo:
Prova ad aggiungere la posizione relativo , rimuovi le proprietà width e float del lato destro, quindi aggiungi left e right con il valore 0 .
Inoltre, puoi aggiungere la regola margine sinistro con il valore basato sulla larghezza dell'elemento sinistro (+ alcuni pixel se hai bisogno di spazio tra) per mantenere la sua posizione .
Questo esempio funziona per me:
#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
Prova questo. Ha funzionato per me.
Ho lavorato su questo problema per due giorni e ho una soluzione che potrebbe funzionare per te e per chiunque altro cercando di creare una larghezza fissa reattiva a sinistra e avere il lato destro riempire il resto dello schermo senza avvolgere a sinistra lato. L'intenzione che presumo è di rendere la pagina reattiva nei browser e nei dispositivi mobili.
Ecco il codice
// 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>
Ecco il mio violino che potrebbe funzionare solo per te come ha fatto per me. https://jsfiddle.net/Larry_Robertson/62LLjapm/
L'elemento html della tabella lo rende di default ... Definisci la larghezza della tabella, quindi le colonne copriranno sempre l'intera larghezza della tabella. Il resto riguarda l'immaginazione
Regole per articoli e contenitori;
Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}
Usa white-space: nowrap; per i testi negli ultimi elementi per la loro destrutturazione.
Articolo X% | Articolo Y% | Articolo Z%
Lunghezza totale sempre = 100%!
se
Item X=50%
Item Y=10%
Item z=20%
quindi
Articolo X = 70%
L'elemento X è dominante (i primi elementi sono dominanti nel layout CSS della tabella)!
Prova max-content; proprietà div all'interno per diffondere div nel contenitore:
div[class="item"] {
...
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
...
}
Ho riscontrato questo stesso problema nel tentativo di impaginare alcuni controlli jqueryUI . Sebbene la filosofia comune ora sia " usa DIV invece di TABLE " ;, ho scoperto che nel mio caso l'utilizzo di TABLE ha funzionato molto meglio. In particolare, se è necessario un allineamento diretto tra i due elementi (ad es. Centraggio verticale, centraggio orizzontale, ecc.), Le opzioni disponibili con TABELLA forniscono controlli semplici e intuitivi per questo.
Ecco la mia soluzione:
<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>
nuovo in css. Ma ho risolto questo problema usando inline-block. controlla questo: http://learnlayout.com/inline-block.html
