textarea innen div

Ich glaube ich bin etwas falsch hier, ich erwarte, dass die textarea um 10px kleiner als das übergeordnete div-Element auf jeder Seite, aber es ist nicht so, es ist zu klein:

<html>
  <div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;">
    <textarea style="position: absolute; left: 10px; top: 10px; bottom: 10px; right: 10px; border: 1px solid #FF0000; resize:none;"></textarea>
  </div>
</html>

jsfiddle: http://jsfiddle.net/2a7LR/1/

warum geschieht dies ? und wie kann ich es machen, so passt er 10 px kleiner in jeder Seite vom übergeordneten div ?

Es wird richtig angezeigt nur in chrome/safari, aber falsch in jedem anderen browser ( firefox, opera, IE8 )

brauchen Sie genau 10px oder kann man mit % - Breite/ - Höhe für die textbox?
sogar mit Prozentangaben funktioniert es nicht : jsfiddle.net/2a7LR/6

InformationsquelleAutor MirrorMirror | 2012-05-25

  1. 10

    http://jsfiddle.net/2a7LR/5/ Angepasst, einige CSS für Sie. Im Grunde verwendet width: 100%; height: 100% zog die 10px des Containers padding Eigenschaft, dann box-sizing an die textarea-Komponente, um die Größe nehmen, die Grenze berücksichtigt.

    Das wird nicht funktionieren mit IE7

    InformationsquelleAutor Niet the Dark Absol

  2. 2
    <html>
<div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;">
    <textarea style="position: relative; margin: 10px 10px 10px 10px; width:90%; height: 90%"></textarea>
</div>
</html>​

    Sollte diese Arbeit für Sie. der text-Bereich kann relativ innerhalb einer absoluten div. Sie brauchen nur, um es zu positionieren, da die Margen und nicht mit top und left.

    Cheers, Fede

    EDIT: und auch bemerkt, dass Sie nicht in beliebiger Breite und Höhe in den text-Bereich, so dass es nicht suppost zu wissen, die Größe der es - es setzt den Standard .

    InformationsquelleAutor FedeSc

  3. -2

    http://jsfiddle.net/EzJ8G/1/
    Ersetzen Sie den Stil in der textarea und fügen padding:10px;

    Funktioniert nicht in chrome

    InformationsquelleAutor Hawiak

Schreibe einen Kommentar