如何在css中管理textarea右侧溢出？答案

【问题标题】：How to manage textarea right side overflow in css?如何在css中管理textarea右侧溢出？
【发布时间】：2016-12-06 18:46:13
【问题描述】：

我必须在两个不同的<div>s 中创建两个<textarea>s，并且两者都必须排成一行。并且<textarea>s 在所有类型的屏幕中都必须占据 100% 的宽度（每个 50%）。

但是，当我尝试第二个 <textarea> 时，右侧溢出，甚至我无法管理 <textarea> 的右边距（在 CSS 中）。如何避免<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>

【问题讨论】：

你能发布代码吗？ Stack sn -p 或jsfiddle.net 更可取。
请编辑您的问题并在其中添加代码，而不是不可读的评论

标签： html css css-float textarea overflow

【解决方案1】：

注意边距更改为textarea。应该这样做！

.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】：

你必须从你的textarea中删除margin，因为margin是从元素的外部宽度计算出来的，你可以使用padding到.conatiner来代替。

并添加一个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>

【讨论】：

它工作得很好，现在我怎样才能给两个 textarea 100% 的高度？
@mahi 现在检查我的答案并注意左右 div 的变化
它现在运行良好，告诉我如何归档 100% 高度？
它现在是 100% 高度 .. 检查答案中的新编辑
我希望所有屏幕的高度为 100%。在容器中使用 min-height: 500px; 的代码，请删除 min-height: 500px; 并按百分比制作

【解决方案3】：

删除边距。因为您为每个左右文本区域分配了 50%。所以你的总宽度将是 100%+10px；所以它会在x轴上溢出

textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
}

【讨论】：

如果你想给保证金。然后以百分比给出它，比如 2%，并且在两个文本区域中都有 49% 的宽度。

【解决方案4】：

从你的文本区域中删除边距，因为边距是根据元素的外部宽度计算的，并给出 display: table;到容器。

【讨论】：

如何归档 100% 高度？
html,body.container{ 高度:100%;边距：0； }

【解决方案5】：

您可以为此使用 iframe。如果您使用 iframe，您可以将溢出设置为隐藏的左侧和右侧

【讨论】：