CSS OVERFLOW-Y
Some content in an element may fall outside the element’s rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the ‘overflow-y’ property describes what to do with the content that exceeds the element’s height.
Example
| blockquote { width: 50px; height: 50px; overflow-y: scroll }
<blockquote style=”width: 50px; height: 50px; overflow-y: scroll”>some text</blockquote> |
Possible Values
| Value | Description |
|---|---|
| visible | Content is not clipped and may be rendered outside of the element’s box. |
| hidden | Content is clipped and content outside of the element’s box is not visible. The size of the clipping region is defined by the ‘clip’ property. |
| scroll | Content is clipped as necessary, but a vertical scrollbar is made available where necessary to view the additional, non-visible content. If the Visual media in use is static (such as Print) the content should be treated as if the value was ‘visible’. |
| auto | This value is browser and media dependent, but should allow for a vertical scrollbar if possible in case of overflow. |
7 Responses
I didn’t know about the overflow-Y CSS code. This would have saved me so much time on past projects… I seem to learn the hard way though – ALWAYS.
Its very nice to understand the concept. good show!!!!
Good that I found this article, this is what I am exactly looking for..Thanks a lot
The only problem I have with this is that the scrollbar appears regardless of whether it’s needed or not. Any ideas on how to make it appear only when needed? I’m specifically not using ‘auto’ as I dont want the x axis scrollbar to appear either. Thanks for the markup!
This is brilliant! Thankyou! It also works to crop off excess content that extends outside of the screen resolution using .. overflow-x: hidden; ..
My headache is now gone! Thankyou!
I have used the followings:
body{
overflow-y:scroll;
margin:0;
padding:0;
}
Its working for me fine.
Thanks a lot for sharing such a great post. I think this will help people a lots. Please keep it up.
Cheer.
I am trying to figure out how to allow overflow only on the bottom side of an element, and not the top. Is that possible? The Facebook like button pulls up a comment box which expands past the main part of the page to the right, and bottom. (in my footer) …when I set overflow:display; …it also cuts off the top bar on my footer, which is NOT what I want. It’s a darn WordPress site, so editing the HTML is not all that easy …it’s all hidden inside php code, and it’s not mine, so tracing it would take forever. (or I’m lazy today…) …I’m open to any suggestions (PLEEEEASE)