Meh*_*dad 2 html css scrollbar width
我正在创建div如下:
<html>
<body>
<table>
<tr>
<td>
<div style="position: relative; overflow: auto; max-height: 15em;">
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
<label><input type="checkbox"/>Hello! Hello!</label><br/>
</div>
</td>
</tr>
</table>
</body>
</html>
每个标签的文本都不必要地包含在下一行.
我该如何解决？
尝试1
加入div,
white-space: nowrap;
这个问题是垂直滚动条似乎阻碍了内容略微引入一个小的不必要的水平滚动条.
尝试2
加入div,
white-space: nowrap;
padding-right: 1.5em; // increase as appropriate
这里的问题是你猜测垂直滚动条的大小来删除水平滚动条.
尝试3
加入div,
white-space: nowrap;
overflow-x: hidden;
overflow-y: scroll;
现在,水平滚动条被移除,垂直滚动条的大小没有被猜到,但它总是可见的.
尝试4
问题似乎归结为需要为滚动条保留空间,overflow-y: scroll;但没有它始终可见.我想到的第一个解决方案是div在第一个已经overflow-y: scroll;设置的位置和a之后添加额外的解决方案width: 100%;.问题是,常规div滚动条包含在宽度中.经过一些试验和错误,似乎如果你使用float它不是.因此,通过使用额外的,float您可以通过滚动条宽度强制容器的宽度,然后设置width: 100%;在原始div上,它也将占用额外的空间.您可以通过将其高度设置为隐藏额外浮动0.
注意:我不完全确定为什么这样可以自己工作,而且我只在Firefox5上进行了测试.我希望它对你有所帮助.所以,
加,
<div class="hack"></div>
下面你是原创的div.然后,
.content {
float: left;
width: 100%;
overflow-y: auto;
max-height: 15em;
}
.hack {
float: left;
width: 100%;
overflow-y: scroll;
height: 0;
}