How to make a div clip your visible content?

For example, as shown in the figure below. Do you have content that spans the entire page, but want the div "window" to display only part of it? I tried to make two divs, one internal and one external.

The internal position was fixed (therefore, based on the browser) and covered the whole page, while the external was absolute and located where the red rectangle was. Then I put the inner (with page content) in the outer div, but didn't work at all

I also tried to spoil the negative add-on, but this is not allowed

cropped div example

+6
source share
3 answers

Use the overflow , overflow-y or overflow-x style with a specific width or height .

If you just want to hide large content, use overflow:hidden . If you want to also show the scroll bar, use overflow:scroll .

Use overflow-x to hide content that is wider than the width of the container. Use overflow-y to hide content that is taller than the container. Use overflow to hide content whose width and height exceed the width and height of the container.

 <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> 
+9
source

What if you tried to create a transparent div to be placed above the page content?

Since you cannot specify a margin or fill color, you need to have 5 divs: top, left center, right, bottom. They will cover 100%, and the center will be transparent. The rest will be a solid background or translucent, as in your example. Having a transparent center div probably means you cannot click on the content below it. Instead, you may not have a central div.

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

overflow: will automatically show the scroll bar when necessary, but not necessary if necessary.

0
source

Source: https://habr.com/ru/post/921633/


All Articles