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

Question

Estoy intentando hacer un sitio web sin desplazamiento vertical para una página, pero necesito que uno de los DIVs tenga que expandirse verticalmente hasta el final de la página (como máximo), y que cuando tiene contenido que no encaja, el div debe crear un desplazamiento vertical.

ya tengo el css para el dentro de del div calculado en this fiddle, creando el scroller cuando sea necesario. También he descubierto how to make que el contenedor div crece para ocupar exactamente el espacio vertical que tiene en la página. ¡No puedo hacer que funcionen juntos!

ten en cuenta que en jsfiddle no podrás ver el contenido de todo el sitio web y en ese sentido lo que obtienes para el segundo violín no muestra realmente lo que se está haciendo, pero funciona igual que yo sin embargo,

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.

favor también mirar esta foto, ya que podría ser más fácil de entender lo que estoy tratando de decir: PICTURE

he intentado mirar a otras preguntas con respecto a estos temas, pero ninguno parecía cubrir todos los aspectos i Estoy tratando de resolver ...: S

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

gracias!

Edit1: fija los errores tipográficos

Edit2: foto añadido para la explicación

Answer 1

Bueno, después de una investigación larga, he encontrado 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:

<div id="framecontentBottom"> 
<div class="innertube"> 

<h3>Sample text here</h3> 

</div> 
</div> 


<div id="maincontent"> 
<div class="innertube"> 

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... 
</div> 
</div> 
</div> 

puede que no funcione con la cosita horizontal todavía, pero es un trabajo en progreso.

Básicamente, dejé caer el modelo "inception" boxes-inside-boxes-inside-boxes y usé el posicionamiento fijo con altura dinámica y propiedades de desbordamiento.

Espero que esto pueda ayudar a quien encuentre la pregunta más tarde!

EDITAR: Esta es la respuesta final.

Answer 2

Prueba esto:
CSS:

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

HTML:

<body> 
<div id="content"> 
...content goes here... 
</div> 
<body> 

Si no lo hace como el posicionamiento absoluto en este caso, solo puede jugar wi haciendo un div padre e hijo a este, ambos con position:relative.

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

<div style="margin:0 auto; width:800px; height:100%; overflow:hidden"> 
<div style="border: 1px solid red; width:800px; position:absolute; bottom:0px; top:0px; overflow:auto"> 
...content goes here... 
</div> 
</div> 

Answer 3

creo que es bastante fácil. sólo tiene que utilizar 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 acaba de dar esta clase para ur div igual que -

<div class="content">your stuff goes in...</div> 

Answer 4

Esto es lo que he conseguido 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

Answer 5

respuesta rápida con Puntos principales

más o menos la misma respuesta que la respuesta mejor elegido de @Joum, para acelerar su búsqueda de tratar de lograr la respuesta a la publicado pregunta y ahorrar tiempo de descifrar que hay de nuevo en la sintaxis -

respuesta

Establezca el atributo de posición como fijo, establezca 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 dinámico entrante mientras se mantiene la oportunidad de desplazarse.

Answer 6

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

<html> 
 

 
<body> 
 
    <section id="left"></section> 
 
    <section id="right"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    </section> 
 
</body> 
 

 
</html>

Answer 7

me sorprende nadie ha mencionado calc() todavía.

No pude distinguir su caso específico de sus violines, pero entiendo su problema: desea un contenedor height: 100% que todavía pueda usar overflow-y: auto.

Esto no funciona fuera de la caja, porque overflow requiere alguna restricción de tamaño modificable saber cuando debería empezar a manejar el desbordamiento. Entonces, si fue con height: 100px, funcionaría como se esperaba.

La buena noticia es that calc() can help, pero no es tan simple como height: 100%.

calc() le permite combinar unidades de medida arbitrarias.

Por lo tanto, para la situación que describes en la imagen se incluyen:

Dado que todos los elementos arriba y abajo del div de color rosa son de una altura conocida (digamos, 200px de altura total), puede utilizar calc para determinar la altura de meñique ole:

height: calc(100vh - 200px);

o, 'altura es de 100% de la 200 px vista altura menos.'

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