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

我必须在两个不同的<div>之间创建两个<textarea> s，两者都必须排成一列。在所有类型的屏幕上，两个<textarea>都必须占据100％的宽度（每个50％）。如何在CSS中管理textarea右侧溢出？

但是，当我尝试第二个<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>

来源

2016-08-01 mahi

你可以发布代码吗？堆栈片段或http://jsfiddle.net是可取的。 – Pugazh

请编辑你的问题，并在其中添加代码，而不是不可读的评论 –

从文本区域中删除余量因为计算余量形成元件的外部宽度，并给予显示：表;到容器。

来源

2016-08-01 16:32:22 MikePappa

如何存档100％高度？ – mahi

html，body.container { height：100％; margin：0; } – mahi

注意，在保证金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>

来源

2016-08-01 15:56:57 kukkuz

你必须从你的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>

来源

2016-08-01 15:57:27

它的工作很好，现在我怎么能给100％的高度都textarea？ – mahi

我将在答案中做出编辑 –

@mahi现在检查我的答案，并注意左侧和右侧div –

删除余量除去边框宽度。因为您正在为每个左右文本区分配50％。所以你的总宽度将是100％+ 10px;所以它将溢出上x轴

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

来源

2016-08-01 15:59:44

如果你想给保证金。那么在textarea中以百分比表示2％，宽度为49％。 –

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

回答

相关问题