{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 小情绪 Triste * 的问题《HTML Div Width with Overflow: Auto?》','https://www.manongdao.com/q-894412.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm creating a div like the following:
Edit: Here's an example:
<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>
The text of every label unnecessarily wraps to the next line.
How do I fix this?
From what i see, you need just the vertical scroll bar. This should should do the trick.
You can enforce a vertical scrollbar with
overflow-y: scroll;.Edit:
Oké, finally I think it's clear what you want.
See this demo fiddle.
CSS:
HTML:
Edit 2:
Ok, maybe this is what you want? I hope you don't mind the extra padding if there are just a few lines in the div.
Attempt 1
Add to the
div,The problem with this was the vertical scrollbar that appears impedes on the content slightly introducing a small unnecessary horizontal scrollbar.
Attempt 2
Add to the
div,The problem here is that you're guessing the size of the vertical scrollbar to remove the horizontal one.
Attempt 3
Add to the
div,Now, the horizontal scrollbar is removed, and the size of the vertical one is not being guessed, but it is always visible.
Attempt 4
The problem seems to boil down to needing to reserve the space for a scrollbar, as
overflow-y: scroll;does but without it always being visible. The first solution that came to mind was to add an extradivalongside the first that hasoverflow-y: scroll;set and awidth: 100%;. The problem was that with a regulardivthe scrollbar is included in the width. After some trial and error though, it seems that if you use afloatit isn't. So by using an extrafloatyou can force the width of the container to be larger by a scrollbars width, and then settingwidth: 100%;on the original div, it will take up the extra space too. You hide the extra float by setting it's height to0.N.B. I'm not entirely sure why this works myself, and I've only tested on Firefox5 where it seems to work. I hope it's helpful for you. So,
Add,
below you're original
div. Then,An edit of your jsfiddle including this fix is here.