División automática de altura con desbordamiento y desplazamiento cuando sea necesario

Intento hacer un sitio web sin desplazamiento vertical para una página, pero necesito que uno de los DIV tenga que expandirse verticalmente al final de la página (como máximo), y que cuando tenga contenido que no encaje , el div debería crear un desplazamiento vertical.

Ya tengo el CSS para el interior de la div descifrado en este violín , creando el scroller cuando sea necesario. También he descubierto cómo hacer que el div del contenedor crezca para ocupar exactamente el espacio vertical que tiene en la página. ¡No puedo hacer que funcionen juntos!

tenga en cuenta que en jsfiddle no podrá ver el contenido de todo el sitio web y, en ese sentido, lo que obtiene para el segundo violín no muestra realmente lo que se está haciendo, pero funciona como lo pretendía.

solo otra nota: como son violines diferentes, el id # contenedor div en el primer violín es el id # dcontent div del segundo ejemplo.

hay otra cosa: para un tipo de contenido, este div se desplazará verticalmente, pero para otro tipo de contenido, quiero que se desplace horizontalmente, ya que tendrá un producto “deslizante” que muestra los elementos horizontalmente dentro de este DIV.

por favor, también mire esta foto porque podría ser más fácil entender lo que trato de decir: IMAGEN

Intenté buscar otras preguntas sobre estos temas, pero ninguna parecía cubrir todos los aspectos que trato de resolver …: S

si hay algo más que pueda proporcionar para ayudarlo a usted / a mí 🙂 ¡descifrarlo, por favor hágamelo saber!

¡Gracias!

EDIT1: errores de escritura fijos

EDIT2: imagen añadida para explicación

Bueno, después de una larga investigación, encontré una solución que hace lo que necesito: http://jsfiddle.net/CqB3d/25/

CSS:

body{ margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%; max-height: 100%; } #caixa{ width: 800px; margin-left: auto; margin-right: auto; } #framecontentTop, #framecontentBottom{ position: absolute; top: 0; width: 800px; height: 100px; /*Height of top frame div*/ overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ background-color: navy; color: white; } #framecontentBottom{ top: auto; bottom: 0; height: 110px; /*Height of bottom frame div*/ overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ background-color: navy; color: white; } #maincontent{ position: fixed; top: 100px; /*Set top value to HeightOfTopFrameDiv*/ margin-left:auto; margin-right: auto; bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/ overflow: auto; background: #fff; width: 800px; } .innertube{ margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/ } * html body{ /*IE6 hack*/ padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/ } * html #maincontent{ /*IE6 hack*/ height: 100%; width: 800px; } 

HTML:

 

Sample text here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text...

podría no funcionar con la cosa horizontal todavía, pero, ¡es un trabajo en progreso!

Básicamente abandoné el modelo de “inicio” cajas-dentro-cajas-dentro-cajas y utilicé el posicionamiento fijo con altura dinámica y propiedades de desbordamiento.

Espero que esto ayude a cualquiera que encuentre la pregunta más tarde.

EDITAR: Esta es la respuesta final.

Respuesta rápida con puntos principales

Casi la misma respuesta que la mejor respuesta elegida de @Joum, para acelerar su búsqueda de tratar de lograr la respuesta a la pregunta publicada y ahorrar tiempo para descifrar lo que está sucediendo en la syntax.

Responder

Establezca el atributo de posición como fijo, configure los atributos superiores e inferiores a su gusto para el elemento o div del que desea que tenga un tamaño “automático” en comparación con su elemento principal y luego configure el desbordamiento como oculto.

 .YourClass && || #YourId{ position:fixed; top:10px; bottom:10px; width:100%; //Do not forget width overflow-y:auto; } 

Wallah! Esto es todo lo que necesita para su elemento especial que desea tener una altura dinámica de acuerdo con el tamaño de la pantalla y / o el contenido dynamic entrante mientras se mantiene la oportunidad de desplazarse.

Me sorprende que nadie haya mencionado calc() aún.

No pude distinguir su caso específico de sus violines, pero entiendo su problema: desea una height: 100% contenedor del height: 100% que aún puede usar overflow-y: auto .

Esto no funciona de la caja porque el overflow requiere alguna restricción de tamaño codificada para saber cuándo debería comenzar a manejar el desbordamiento. Entonces, si fueras con height: 100px , funcionaría como se esperaba.

La buena noticia es que calc() puede ayudar , pero no es tan simple como la height: 100% .

calc() permite combinar unidades de medida arbitrarias.

Entonces, para la situación que describes en la imagen, incluyes: imagen del estado deseado

Como todos los elementos arriba y debajo de la div rosa son de una altura conocida (digamos, 200px en altura total), puedes usar calc para determinar la altura de ole pinky:

height: calc(100vh - 200px);

o, ‘la altura es el 100% de la altura de la vista menos 200px’.

Entonces, overflow-y: auto debería funcionar como un amuleto.

Prueba esto:
CSS:

 #content { margin: 0 auto; border: 1px solid red; width:800px; position:absolute; bottom:0px; top:0px; overflow:auto } 

HTML:

  
...content goes here...

Si no te gusta el posicionamiento absoluto en este caso, solo puedes jugar haciendo un div principal y secundario a este, ambos con position:relative .

EDITAR: A continuación debería funcionar (acabo de poner el CSS en línea por el momento):

 
...content goes here...

Esta es una solución horizontal con el uso de FlexBox y sin el molesto posicionamiento absolute .

 body { height: 100vh; margin: 0; display: flex; flex-direction: row; } #left, #right { flex-grow: 1; } #left { background-color: lightgrey; flex-basis: 33%; flex-shrink: 0; } #right { background-color: aliceblue; display: flex; flex-direction: row; flex-basis: 66%; overflow: scroll; /* other browsers */ overflow: overlay; /* Chrome */ } .item { width: 150px; background-color: darkseagreen; flex-shrink: 0; margin-left: 10px; } 
   

Esto es lo que logré hacer hasta ahora. Supongo que esto es algo de lo que intentas sacar. Lo único es que aún no puedo asignar la altura adecuada al contenedor DIV.

-> JSFIDDLE

creo que es bastante fácil. solo usa este css

 .content { width: 100%; height:(what u wanna give); float: left; position: fixed; overflow: auto; overflow-y: auto; overflow-x: none; } 

después de esto, solo dale esta clase a tu div como si …

 
your stuff goes in...