我有一个如下的DIV。我的问题是,每当滚动条可见时,它显示在300px宽度外。但我需要为DIV固定300px的宽度,而不考虑滚动条。我怎样才能做到这一点?如何把DIV滚动条放在固定宽度的DIV内(overflow:auto,float:left)
<div style="width:300px; overflow:auto; float:left;"></div>
感谢,
我有一个如下的DIV。我的问题是,每当滚动条可见时,它显示在300px宽度外。但我需要为DIV固定300px的宽度,而不考虑滚动条。我怎样才能做到这一点?如何把DIV滚动条放在固定宽度的DIV内(overflow:auto,float:left)
<div style="width:300px; overflow:auto; float:left;"></div>
感谢,
我要么放在一个300容器div和溢出适用于内的div。这应该把它限制到你想要的尺寸。如果这是不可取的,你可以试验它,看看是否应用box-sizing:border-box
,但旧版本的IE不支持。
希望我用这个答案正确理解问题,如果不是请指出。
HTML
<div>
Lorem ipsum dolor sit amet, vehicula vulputate, velit sapien suspendisse, ipsum nunc, integer velit aptent non quam. Erat sit consequat lectus, velit risus taciti, in sed, risus tincidunt. Egestas lacus vel voluptatem in volutpat. Sapien lacus suspendisse nec velit. Integer molestie erat, erat lectus luctus ipsum. Nulla massa netus. Odio nunc maecenas modi tortor cras in. Quis nonummy ridiculus vel sed, luctus nulla lectus bibendum justo donec.
Lorem ipsum dolor sit amet, vehicula vulputate, velit sapien suspendisse, ipsum nunc, integer velit aptent non quam. Erat sit consequat lectus, velit risus taciti, in sed, risus tincidunt. Egestas lacus vel voluptatem in volutpat. Sapien lacus suspendisse nec velit. Integer molestie erat, erat lectus luctus ipsum. Nulla massa netus. Odio nunc maecenas modi tortor cras in. Quis nonummy ridiculus vel sed, luctus nulla lectus bibendum justo donec.
Lorem ipsum dolor sit amet, vehicula vulputate, velit sapien suspendisse, ipsum nunc, integer velit aptent non quam. Erat sit consequat lectus, velit risus taciti, in sed, risus tincidunt. Egestas lacus vel voluptatem in volutpat. Sapien lacus suspendisse nec velit. Integer molestie erat, erat lectus luctus ipsum. Nulla massa netus. Odio nunc maecenas modi tortor cras in. Quis nonummy ridiculus vel sed, luctus nulla lectus bibendum justo donec.
</div>
CSS
div {
width:300px;
height:300px;
overflow-y:scroll;
float:left;
background:orange;
}
你可以使用overflow-y: scroll
,这样滚动条将始终可见,然后div的宽度设置为284px
占约。滚动条的宽度。
不错的一个.. lemme试试...我不在乎旧IE ...... – abdfahim 2013-03-18 15:04:01