Menu
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
354
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>
.panel {
width:300px;
height:400px;
overflow:auto;
}
overflow:auto will show a scroll bar when it is necessary, but not unless its necessary.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
