property 'overflow-y' from css don't show the expected behaviour -
in project, create follow div section simulate popup box:
<div id="box"> <div id="header"> <span id="title"></span> <span id="button">x</span> </div> <div id="text"> </div> </div>
where append content of several pages on it, content bigger size of box. in current status, content rendered outside box, despite using value 'scroll' property overflow-x, follow:
#box { border-style: solid; box-shadow: 2px 2px 2px black; height: 400px; max-width: 90%; max-height: 90%; } #button { background-color: #99ccff; min-width: 32px; max-width: 5%; min-height: 32px; max-height: 100%; position:absolute; right:0px; text-align:center; padding-left:10px; padding-right:10px; } #header { background-color: #66b2ff; } #title { text-decoration-color: #ffffff; font: 28px arial; } #text { background-color: #e0e0e0; text-decoration-color: #000000; font: 24px sans-serif; overflow-y: scroll; min-height: 480px } .ui-resizable-handle { width: 5px; height: 5px; background-color: red; }
what missing here?
if im not mistaken,
overflow-x: scroll; overflow-y: scroll;
are css 3 properties , if using old browser wont work.
your code works fine in chrome33, here fiddle
Comments
Post a Comment