¿Es posible que el elemento de bloque en línea llene automáticamente el ancho disponible?

Question

Tengo un <div id="content"> que contiene <div id="sub-navigation> y <div id="main container">, que son bloques en línea. Me gustaría poder hacer que el main container llene el resto del ancho de página disponible. ¿Es eso posible?

necesito columns-strip para ampliar o reducir en función del número y la anchura de column elementos. Si el ancho del columns-strip excede el ancho del main container, debe aparecer una barra de desplazamiento horizontal.

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

Tienes que eliminar los estilos inline-block y flotar el #sub-navigation div. inline-block no es adecuado para lo que está tratando de lograr. Cuando no agrega estilos de visualización, el elemento div será el valor predeterminado que es block, los elementos block ocupan todo el espacio disponible de forma predeterminada. Al flotar el elemento #sub-navigation, lo hace ocupar el espacio requerido para su contenido.

#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; 
} 

asegúrese de agregar un elemento clear: left después de la #main-container

Answer 2

no es así como se supone inline-block s para ser utilizado. Lo mejor que puede hacer aquí es hacer su cuadro de navegación float:left y dejar solo el valor predeterminado display.

Answer 3

Si su encabezado, pie de página y la envoltura tienen anchuras específicas, entonces sí, usted puede tener su principal recipiente a llenar el espacio disponible. Pero si no especifica anchos en su CSS, entonces necesita determinar qué tan grande puede ser su contenedor principal en función del ancho representado del elemento contenedor (contenedor). La única forma de determinar ese ancho después de cargar la página es con javascript. Si desea que su sitio tenga un ancho dinámico pero aún así su contenido (subnavegación y contenedor principal) llene la pantalla, necesitará usar javascript o porcentajes, y los porcentajes pueden ponerse desagradables cuando comience a buscar diferentes resoluciones de monitores, computadoras portátiles, etc ...

Answer 4

¿Has oído hablar de flex box model !!

Está hecho solo para eso.

Nota: en el modelo de flexbox, todos los elementos secundarios actúan como modelo de caja flexible, no puede optar por ciertas cosas. Lo que significa que si la página tiene navegación y debajo de ella, div div + side div. No puedes hacer una navegación superior fuera de él. Lo cual tiene implicaciones. Entonces la solución es tener todas las cosas solo que necesiten flex box en un div.