textarea滚动条溢出并隐藏div边框
我已经在许多浏览器上尝试过这一点（通过浏览器截图），并且普遍滚动条溢出并隐藏绿色边框。
我不想要 overflow:hidden 因为这会剪辑滚动条。
如何让滚动条位于边框内，而不是遮挡边框？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid green; margin: 0pt; padding: 0pt; width: 100%; height: 100px;">
<div style="margin: 0pt; padding: 0pt; position: relative; float: left; width: 20%; height: 100%;">
<select style="margin: 0pt; padding: 0pt; width: 100%; height: 100%;" multiple >
<option></option>
</select>
</div>
<div style="position: relative; float: left; width: 80%; height: 100%;">
<form style="margin: 0pt; padding: 0pt; width: 100%; height: 100%; display: inline; position: relative;">
<textarea readonly="readonly" style="margin: 0pt; padding: 0pt; width: 100%; height: 100%; overflow:scroll;" wrap="off" >
</textarea>
</form>
</div>
</div>
</body>
</html>
I've tried this on many browsers ( via browsershots ) and universally the scrollbars overflow and hide the green border.
I don't want overflow: hidden because that clips the scrollbars.
How do I get the scrollbars inside the border, instead of obscuring the border?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid green; margin: 0pt; padding: 0pt; width: 100%; height: 100px;">
<div style="margin: 0pt; padding: 0pt; position: relative; float: left; width: 20%; height: 100%;">
<select style="margin: 0pt; padding: 0pt; width: 100%; height: 100%;" multiple >
<option></option>
</select>
</div>
<div style="position: relative; float: left; width: 80%; height: 100%;">
<form style="margin: 0pt; padding: 0pt; width: 100%; height: 100%; display: inline; position: relative;">
<textarea readonly="readonly" style="margin: 0pt; padding: 0pt; width: 100%; height: 100%; overflow:scroll;" wrap="off" >
</textarea>
</form>
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
文本区域必须具有 rows 属性。
行采用字体大小。
字体大小和行数将溢出容器。
Text area must have rows attribute.
Rows assume font size.
Font size and rows will overflow the container.