Wie man Textarea rechten Überlauf in CSS zu verwalten?

Ich muss zwei <textarea> s in zwei verschiedenen <div> s erstellen und beide müssen in einer Zeile kommen. Und beide <textarea> s müssen in allen Bildschirmtypen 100% Breite (jeweils 50%) einnehmen.Wie man Textarea rechten Überlauf in CSS zu verwalten?

Wenn ich jedoch die zweite <textarea> versuche, ist die rechte Seite überfüllt und sogar ich bin nicht in der Lage, den rechten Rand (in CSS) für <textarea> zu verwalten. Wie kann ich einen Rechtsüberlauf für <textarea> vermeiden?

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

Quelle

2016-08-01 mahi

Können Sie den Code posten? Stack Snippet oder http://jsfiddle.net ist vorzuziehen. – Pugazh

Bitte bearbeiten Sie Ihre Frage und fügen Sie den Code darin anstelle des unlesbaren Kommentars –

entfernen Marge von Ihrem TextArea- weil Marge berechnet, um die äußeren Breite des Elements bilden, und gibt display: table; zum Behälter.

Quelle

2016-08-01 16:32:22 MikePappa

Wie kann ich 100% Höhe archivieren? – mahi

html, body.container { Höhe: 100%; Rand: 0; } – mahi

Beachten Sie die Änderung der Marge auf textarea. Das sollte es tun!

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

Quelle

2016-08-01 15:56:57 kukkuz

Sie haben margin von Ihrem textarea weil margin berechnet Form, die äußere Breite des Elements entfernen Sie padding zu .conatiner stattdessen verwenden können.

und fügen ein box-sizing Attribut die Rahmenbreite von der Breite berechnet

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>

Quelle

2016-08-01 15:57:27

Es funktioniert gut, jetzt, wie kann ich 100% Höhe zu beiden Textarea geben? – mahi

Ich werde eine Bearbeitung in der Antwort machen, um dies zu erreichen –

@mahi überprüfen Sie meine Antwort jetzt und beachten Sie die Änderung in linken und rechten divs –

entfernen Rand zu entfernen. Weil Sie jedem linken und rechten Textbereich 50% zuweisen. Ihre Gesamtbreite beträgt also 100% + 10px; so wird es überläuft auf dem x-Achse

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

Quelle

2016-08-01 15:59:44

wenn Sie Marge geben wollen. dann geben Sie es in Prozent sagen 2% und haben eine Breite von 49% in beiden Textarea. –

Wie man Textarea rechten Überlauf in CSS zu verwalten?

Antwort

Verwandte Themen