CODEWITHSUNDEEP
htmlcss
user1561753
user1561753

Reputation: 357

How do you make a div clip its visible content?

For instance like in the image below. You have the content spanning the entire page but you want the div "window" to only show part of it? I tried making two divs, one an inner and one an outer.

The inner had it's position fixed (so based on the browser) and spanning the entire page while the outer was absolute and positioned where the red rectangle is. I then placed the inner (with the page content) in the outer div but didn't work at all

I also tried messing with negative padding but that isn't allowed

cropped div example

Upvotes: 11

Views: 27798

Answers (3)

greg
greg

Reputation: 1873

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

overflow:auto will show a scroll bar when it is necessary, but not unless its necessary.

Upvotes: 2

Jay
Jay

Reputation: 4686

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

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

Use overflow-x to hide content whose width exceeds the container width. Use overflow-y to hide content whose height exceeds the container height. Use overflow to hide content whose width & height exceeds the container width & height.

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

Upvotes: 20

paddy
paddy

Reputation: 63471

What if you tried creating a transparent div to float over the page content?

Since you can't specify a margin or padding colour, you'd need to have 5 divs: top, left centre, right, bottom. These would span 100%, and the centre would be the transparent one. The others would be a solid background colour, or semi-transparent as in your example. Having a transparent centre div would probably mean you can't click on content beneath it. You might want to have no centre div instead.

Upvotes: 0

Related Questions