2011-12-08 18 views
6

Tengo un div y ese div tiene una altura de 200px. Dentro del div hay texto y no quiero que el div tenga barras de desplazamiento, por lo tanto, he configurado el desbordamiento: oculto.Desborde una lista dentro de un div cuyo desbordamiento: oculto

Ahora, dentro de ese div hay también una lista, que actúa como un cuadro desplegable. Cuando haces clic en el cuadro de lista/desplegable, quiero que aparezca en la parte superior de la div principal.

Aquí se muestra un ejemplo con el div principal a overflow: hidden:

enter image description here

Y esto es un ejemplo sin desbordamiento: oculto. Entonces quiero lo siguiente, pero el texto no se desborda.

enter image description here

jsFiddle: http://jsfiddle.net/w8kQA/

+2

1 buena pregunta, me he encontrado esto antes y nunca lo suficientemente profundo cavado para averiguar. Siempre hice un trabajo para solucionarlo (como la posición absoluta de un elemento sobre la caja, etc.) – Jakub

+0

Ya está posicionado como absoluto ... – jQuerybeast

+0

¿Es importante usar la lista desplegable dentro de este recuadro? ¿Qué piensas sobre el menú desplegable con posición absoluta, pero no dentro de esta casilla? – tildy

Respuesta

2

Se podría establecer el desbordamiento: oculto en el elemento dentro de la caja, en lugar de en la propia caja:

http://jsfiddle.net/w8kQA/1/

+2

Buena respuesta. Puede cambiar la altura a 'height: inherit' en' p' para encapsularlo un poco más. Esto requeriría que cambies la lista a 'position: absolute' aunque: http://jsfiddle.net/w8kQA/5/ –

1

En los comentarios anteriores , mencionas que tienes 20 cajas dentro de un div.

Si ese es el caso, entonces envolvería el #box y el .list dentro de un div holder. De esa manera puede lograr su diseño y aún tener múltiples cuadros en un div.

jsFiddle: http://jsfiddle.net/w8kQA/2/

+0

Prefiero tu respuesta en el comentario de ptriek así que – jQuerybeast

+0

No hay problema :) Preferí su respuesta a la mía así que solo agregó una pequeña mejora a la misma –

Cuestiones relacionadas