2012-05-25 29 views
5

Creo que estoy haciendo algo mal aquí, espero que el área de texto para ser 10px más pequeño que el div padre por todas partes, pero no es así, es demasiado pequeño:área de texto dentro div

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

¿por qué sucede esto? y ¿cómo puedo hacerlo para que quepa 10 px más pequeño en cada lado del div principal?

Parece correctamente sólo en cromo/safari, pero mal en cualquier otro navegador (Firefox, Opera, Internet Explorer 8)

+0

¿necesita exactamente 10px o puede usar% width/height para el cuadro de texto? –

+0

incluso con porcentajes no funciona: http://jsfiddle.net/2a7LR/6/ – MIrrorMirror

Respuesta

10

http://jsfiddle.net/2a7LR/5/ Ajustado algunos CSS para usted. Básicamente utilizado width: 100%; height: 100%, movió 10px a la propiedad padding del contenedor, luego agregó box-sizing al área de texto para hacer que el tamaño tome en cuenta el borde.

+0

Esto no funciona con IE7 –

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

Esto debería funcionar para usted. el área de texto puede ser relativa dentro de un div absoluto. solo necesitas posicionarlo con márgenes y no con arriba ni a la izquierda.

Cheers, Fede

EDIT: y también se dio cuenta de que no se ha definido ninguna anchura y altura en el área de texto así que no es suppost saber el tamaño de la misma - que sólo pone el valor predeterminado.

Cuestiones relacionadas