- Code: Select all
#box{height:400px;}
the text will simple bleed out of the box for the next 600px without batting an eyelash. How terrible! I don't want the box to be 1000px tall; my design may depend on the box being exactly 400px tall. What a dilemma!
Or is it?
CSS comes to the rescue with the overflow property. This property is used to control what happens to text or whatever else is bigger than the boundaries you have setup for the text (or whatever) container. The overflow property has three settings:
hidden
scroll
auto
hidden simply truncates (that means "to cut off abruptly") the text at the end of the boundary. There is no way to see the remaining text after that point because this feature does not permit scrolling.
scroll makes scrollbars appear both horizontally and vertically whether you need them or not. As such, I don't use this property as often because I don't want people to see scrollbars they don't actually use or need. How do I fix that problem?
auto lets CSS handle the scrollbars that appear. If only a horizontal scrollbar is needed, then only a horizontal scrollbar appears. If only vertical, then only a vertical scrollbar appears. Of course, if the text doesn't fill in the entire space, then the scrollbars don't appear at all. It's very nice to use and I use it often.
Can I make scrollbars invisible, but still scroll?
Unless you are supremely skilled at coloring, there isn't a way to make them actually invisible. You can color the scrollbars the same color as the background and that might give the illusion of invisibility. You can also make custom scrollbars by playing around with the scrollbar properties. These will only render in IE, though, and they aren't standard, so it's best to leave them alone as other browsers will only see normal scrollbars and your CSS won't validate whatsoever.
Have fun playing with that property, kids.
