如何在CSS中管理textarea右侧溢出？
[英]How to manage textarea right side overflow in css?
问题描述
I have to create two <textarea> s in two different <div> s and both are have to come in single line. 
我必须在两个不同的<div>创建两个<textarea> ，并且两者都必须在同一行中。 And both <textarea> s have to occupy 100% width (50% by each) in all types of screen. 在所有类型的屏幕中，两个<textarea>都必须占据100％的宽度（每个宽度为50％）。
However, when I am trying the second <textarea> , the right side is overflowing and even I am not able to manage right margin (in CSS) for <textarea> . 但是，当我尝试第二个<textarea> ，右侧溢出，甚至我也无法管理<textarea>右边距（在CSS中）。 How can I avoid right overflow for <textarea> ? 如何避免<textarea>右溢出？
.container { background-color: lightblue; border: 5px solid black; min-height: 500px; } textarea { width: 100%; height: 100%; border: 3px none #cccccc; margin: 10px 10px 10px 10px; border: 1px solid black; } .left { float: left; width: 50%; } .right { float: left; width: 50%; }
<div class='left'> <textarea>left </textarea> </div> <div class='right'> <textarea>right</textarea> </div>
4 个解决方案
解决方案1
1 2016-08-01 15:56:57
Note the change in margin to textarea . 请注意textarea边距变化。 That should do it! 那应该做！
.container { background-color: lightblue; border: 5px solid black; min-height: 500px; } textarea { width: 100%; height: 100%; border: 3px none #cccccc; margin: 10px 0px 10px 0px; border: 1px solid black; } .left { float: left; width: 50%; } .right { float: left; width: 50%; }
<div class='left'> <textarea>left</textarea> </div> <div class='right'> <textarea>right</textarea> </div>
解决方案2
1 2016-08-01 15:57:27
you have to remove margin from your textarea because margin calculated form the outer width of the element , you can use padding to .conatiner instead. 您必须从textarea删除margin ，因为从元素的外部宽度计算出的margin ，可以改为使用.conatiner padding 。
and add a box-sizing attribute to remove the border width from the calculate width 并添加一个box-sizing属性以从计算宽度中删除边框宽度
html,body,.container{ height:100%; margin:0; } .container{ background-color: lightblue; border: 5px solid black; padding:10px; display: table; width: 100%; box-sizing: border-box; } textarea { width: 100%; height: 100%; border: 3px none #cccccc; border: 1px solid black; box-sizing: border-box; } .left{ display: table-cell; width:50%; height: 100%; } .right{ display: table-cell; width:50%; height: 100%; }
<html> <body> <div class="container"> <div class='left'> <textarea>left </textarea> </div> <div class='right'> <textarea>right</textarea> </div> </div> </body> </html>
解决方案3
0 2016-08-01 15:59:44
Remove margin. 删除边距。 Because you are assigning 50% to each left and right textarea. 因为您要为每个左侧和右侧文本区域分配50％。 so your total width will be 100%+10px; 因此您的总宽度将为100％+ 10px； so it will overflow on x-axis 因此它将在x轴上溢出
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
}
解决方案4
0 已采纳 2016-08-01 16:32:22
Remove margin from your textarea because margin calculated form the outer width of the element, and give display: table; 从文本区域中删除页边距，因为所计算的页边距是元素的外部宽度，并给出display：table; to container. 到容器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.