¿Cómo se hace que un clip div sea su contenido visible?

Por ejemplo, como en la imagen de abajo. ¿Tiene el contenido que abarca toda la página pero desea que la "ventana" div solo muestre una parte? Traté de hacer dos divs, uno interno y uno externo.¿Cómo se hace que un clip div sea su contenido visible?

El interior tenía su posición fija (por lo que se basa en el navegador) y abarcaba toda la página, mientras que el exterior era absoluto y estaba ubicado donde está el rectángulo rojo. Entonces coloqué el interior (con el contenido de la página) en el div exterior, pero no funcionó en absoluto

También probé jugar con el relleno negativo, pero esto no está permitido

cropped div example

Fuente

2012-07-30 user1561753

Uso overflow, overflow-y, o overflow-x estilo con una específica width o height.

Si simplemente desea ocultar contenido grande, use overflow:hidden. Si también desea mostrar la barra de desplazamiento, use overflow:scroll.

Utilice overflow-x para ocultar contenido cuyo ancho exceda el ancho del contenedor. Use overflow-y para ocultar contenido cuya altura exceda la altura del contenedor. Use overflow para ocultar el contenido cuyo ancho & excede el ancho del contenedor & de alto.

<HTML> 
    <BODY> 
    <DIV STYLE="width:20ex; overflow-x:scroll; border:1px solid black;"> 
     <NOBR>very long text very long text very long text very long text very long text</NOBR> 
    </DIV> 
    <BR /> 
    <DIV STYLE="height:3em; overflow-y:scroll; border:1px solid black;"> 
     line 1<BR /> 
     line 2<BR /> 
     line 3<BR /> 
     line 4<BR /> 
     line 5<BR /> 
     line 6 
    </DIV> 
    <BR /> 
    <DIV STYLE="width:20ex; height:3em; overflow:scroll; border:1px solid black;"> 
     <NOBR>very long text very long text very long text very long text very long text</NOBR> 
     line 1<BR /> 
     line 2<BR /> 
     line 3<BR /> 
     line 4<BR /> 
     line 5<BR /> 
     line 6 
    </DIV> 
    <BR /> 
    <DIV STYLE="width:20ex; height:3em; overflow:hidden; border:1px solid black;"> 
     <NOBR>very long text very long text very long text very long text very long text</NOBR> 
     line 1<BR /> 
     line 2<BR /> 
     line 3<BR /> 
     line 4<BR /> 
     line 5<BR /> 
     line 6 
    </DIV> 
    </BODY> 
</HTML>

Fuente

2012-07-30 10:18:49 Jay

¿Qué pasa si ¿Intentó crear un div transparente para flotar sobre el contenido de la página?

Como no puede especificar un margen o color de relleno, debe tener 5 divs: arriba, centro izquierda, derecha, abajo. Estos abarcarían el 100%, y el centro sería el transparente. Los demás serían un color de fondo sólido o semitransparente como en su ejemplo. Tener un centro div transparente probablemente significa que no puedes hacer clic en el contenido debajo de él. Es posible que no desee tener div en el centro en su lugar.

Fuente

2012-07-30 02:19:19 paddy

.panel { 
      width:300px; 
      height:400px; 
      overflow:auto; 
     }

overflow: auto mostrará una barra de desplazamiento cuando es necesario, pero no menos que su necesaria.

Fuente

2014-05-14 16:53:00 greg

¿Cómo se hace que un clip div sea su contenido visible?

Respuesta

Cuestiones relacionadas