Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you make a div clip its visible content?

Tags:

html

css

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

like image 354
user1561753 Avatar asked Jul 30 '12 02:07

user1561753


2 Answers

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>
like image 137
Jay Avatar answered Sep 26 '22 03:09

Jay


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

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

like image 40
greg Avatar answered Sep 27 '22 03:09

greg