È possibile che l'elemento inline-block riempia automaticamente la larghezza disponibile?

Question

Ho un <div id="content"> che contiene <div id="sub-navigation> e <div id="main container">, che sono blocchi in linea. Mi piacerebbe essere in grado di fare il main container riempire il resto della larghezza di pagina disponibile. È possibile?

Ho bisogno columns-strip per espandere o ridurre in base al numero e la larghezza di column elementi. Se la larghezza dello supera la larghezza dello main container, dovrebbe apparire una barra di scorrimento orizzontale.

CSS:

* { 
    margin: 0px; 
    padding: 0px; 
    font-size: 10pt; 
    white-space: normal; 
} 

#wrapper { 
    margin: 0px 20px; 
    background-color: red; 
} 

#header { 
    margin: 25px 10px 10px 10px; 
    height: 50px; 
    background-color: purple; 
    color: white; 
} 

#content { 
    margin: 10px; 
    padding: 10px; 
    font-size: 0pt; 
    white-space: nowrap; 
    overflow: hidden; 
    background-color: white; 
} 

#sub-navigation { 
    width: 200px; 
    height: 150px; 
    display: inline-block; 
    vertical-align: top; 
    background-color: forestgreen; 
    color: white; 
} 

#main-container { 
    padding: 10px; 
    display: inline-block; 
    overflow: auto; 
    background-color: yellow; 
} 

#columns-strip { 
    padding: 10px; 
    font-size: 0pt; 
    white-space: nowrap; 
    background-color: mediumturquoise; 
} 

.posts-column { 
    margin: 0px; 
    width: 200px; 
    height: 200px; 
    display: inline-block; 
    vertical-align: top; 
    overflow: auto; 
} 

#footer { 
    margin: 10px 10px 25px 10px; 
    height: 50px; 
    background-color: navy; 
} 

HTML:

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="content">  
    <div id="sub-navigation"></div>  
    <div id="main-container"> 
     <div id="columns-strip">  
     <div class="posts-column" style="background-color: lightgray;"></div> 
     <div class="posts-column" style="background-color: darkgray;"></div> 
     <div class="posts-column" style="background-color: gray;"></div> 
     </div> 
    </div> 
    </div> 
    <div id="footer"></div> 
</div> 

Answer 1

È necessario rimuovere gli stili inline-block e flottare il div #sub-navigation. inline-block non è adatto per quello che stai cercando di raggiungere. Quando non si aggiungono stili di visualizzazione, l'elemento div sarà il valore predefinito che è block, block elementi occupano tutto lo spazio disponibile per impostazione predefinita. Facendo galleggiare l'elemento #sub-navigation lo si fa occupare solo lo spazio richiesto per il suo contenuto.

#sub-navigation { 
    width: 200px; 
    height: 150px; 
    float : left; 
    vertical-align: top; 
    background-color: forestgreen; 
    color: white; 
} 

#main-container { 
    padding: 10px;   
    overflow: auto; 
    background-color: yellow; 
} 

Assicurarsi di aggiungere un elemento clear: left dopo la #main-container

Answer 2

non è così che si suppone inline-block s per essere utilizzato. La cosa migliore da fare qui è creare la casella di navigazione float:left e lasciare il valore predefinito display da solo.

Answer 3

Se l'intestazione, piè di pagina e involucro avere larghezze specifiche, allora sì, si può avere il principale contenitore di riempire lo spazio disponibile. Ma se non specifichi le larghezze nel tuo CSS, allora devi determinare quanto grande può essere il tuo CAN principale basato sulla larghezza del rendering dell'elemento contenitore (wrapper). L'unico modo per determinare la larghezza dopo il caricamento della pagina è con javascript. Se vuoi che il tuo sito abbia una larghezza dinamica ma mantenga il tuo contenuto (sotto-navigazione e main-container) riempia lo schermo, dovresti usare javascript o percentuali e le percentuali possono diventare brutte quando inizi a guardare a risoluzioni diverse di monitor, laptop, ecc ...

Answer 4

Mai sentito parlare di flex box modello !!

È fatto solo per quello.

Nota nel modello di flexbox tutti gli elementi figlio fungono da modello di casella flessibile non è possibile disattivare determinate cose. Il che significa che se la pagina ha la navigazione e al di sotto del contenuto div + side div. Non puoi fare la massima navigazione fuori da esso. Quale ha implicazioni. Quindi la soluzione è di avere solo tutto ciò che necessita di un flex box in un div.