El problema del elemento HTML de 100% de ancho

Al asignar algunos elementos HTML (como una entrada de formulario) ancho del 100%: ya no puede aplicar ningún estilo adicional que pueda afectar el ancho. Cosas como border o padding harán que el elemento exceda el 100%. Esto da como resultado elementos incómodos que pueden estar fuera de sus elementos principales.El problema del elemento HTML de 100% de ancho

Dado que CSS no es compatible con width: 100% - 2px; La única forma que conozco de esto es usar un ancho de píxel absoluto (width: 98px) o cortar el elemento al 100%, lo cual no es realmente una opción.

<div style="overflow:hidden;"> 
<input style="width:100%; border: 1px solid #000;" /> 
</div>

¿Hay alguna otra forma de evitar esto?

Fuente

2011-01-11 Xeoncross

Junto con adding another div, la solución estará pronto a utilizar CSS 3 para añadir el box-sizing attribute a las reglas CSS. Este nuevo valor de CSS 3 ya funciona en IE 8 y en todos los demás navegadores, por lo que si no te molesta omitir IE 6 & 7 puedes utilizarlo ahora.

textarea { 
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
     -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
     box-sizing: border-box;   /* Opera/IE 8+ */ 
}

Fuente

2011-01-11 03:45:58 Xeoncross

+1 genial, funciona como un encanto! :) –

Es curioso que todos nosotros copiemos y peguemos este fragmento de css del mismo sitio cada vez que lo necesitamos: P – Loupax

¡genial! Gracias, solo necesitaba esto! – headkit

Puede hacer un contenedor que sea 100% sin cromo (bordes, relleno) y luego colocar un elemento de bloque dentro, con cualquier cromo que desee; un elemento de bloque llenará el ancho total de forma predeterminada.

<style> 
.container {width:100%;border:0:margin:0;} 
.thingy {border:1px solid black;margin:2px;background:#ddd;} 
</style> 

<div class="container"> 
    <div class="thingy"> 
    Both worlds? 
    </div> 
</div>

Fuente

2011-01-11 02:50:36 Rudu

Parece esto sólo funciona en elementos div. Sin embargo, http://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present/272632#272632 muestra una forma de agregar otro div alrededor del elemento y aplicando el estilo a él. – Xeoncross

Bueno, el elemento interno tiene que ser un elemento de nivel de bloque (no 'en línea', o' en línea-bloque'). – Rudu

+1 lo que hubiera dicho si hubiera sido lo suficientemente rápido. :) También vale la pena señalar que CSS3 nos da 'box-sizing: content-box', que resta los bordes y el relleno del ancho calculado. –

Ésta es una vieja pregunta, pero vale la pena mencionar que desde CSS3, puede utilizar calc:

width: calc(100% - 2px);

Fuente

2017-04-25 20:51:59 Keith

El problema del elemento HTML de 100% de ancho

Respuesta

Cuestiones relacionadas