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

Question

我必须在两个不同的 <div> 中创建两个 <textarea>，并且都必须在一行中。在所有类型的屏幕中，两个 <textarea> 都必须占据 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>

Answer 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>

Answer 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>

Answer 3

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

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

Answer 4

从您的文本区域中删除边距，因为边距是根据元素的外部宽度计算的，并给出显示：table；到容器。

Answer 5

您可以为此使用 iframe。如果您使用 iframe，您可以使溢出适合隐藏在左侧和右侧

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

How to manage textarea right side overflow in css?

html

css

textarea

overflow

css-float