CSS: Ancho en porcentaje y Bordes

Question

He definido los anchos de los contenedores en porcentaje. Me gustaría agregar un borde (3px en el lado derecho de un ancho), dado que el ancho del contenedor está en% mientras que el ancho del borde está en px, ¿cómo puedo ajustar el ancho del contenedor?

<div class="wrap"> 
    <div class="left">...</div> 
    <div class="right">...</div> 
</div> 

.wrap{ 
    width:100%; 
} 

.left{ 
    width:30%; 
} 

.right{ 
    width:70%; 
} 

Me gustaría agregar 3px border en el lado derecho de .left. Por ejemplo:

.left{ 
    width:30%; 
    border:3px solid #000; 
} 

Desde que he definido anchura en el%, ¿cuál es la mejor manera de volver a ajustar el ancho de la .left. Puedo reducir aproximadamente el ancho al 29%, pero quiero hacerlo con precisión.

Answer 1

Utilice la propiedad box-sizing: border-box. Modifica el comportamiento del modelo de caja para tratar el relleno y el borde como parte del ancho total del elemento (no los márgenes, sin embargo). Esto significa que el ancho o alto del elemento incluye las dimensiones establecidas para el relleno y el borde. En su caso, eso significaría que el ancho del elemento y su ancho de borde consumirían el 30% del espacio disponible.

soporte para él no es perfecto, sin embargo prefijos de proveedores detectará la mayoría si no todos los navegadores modernos:

.left { 
    width: 30%; 
    border: 3px solid #000; 

    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Más información se puede encontrar en la MDN y Quirksmode.

According to Quirksmode, utilizando los prefijos 3 comerciante sobre (-moz-, -webkit- y -ms-), se obtiene el apoyo para todos los navegadores, incluso IE8.

Answer 2

Eso es un poco complicado, pero echa un vistazo a este post en una manera de conseguir alrededor de él:

• Percentage Plus Pixel Sizing (y Example)
• Box Sizing on CSS-Tricks (y Example)

La propiedad box-sizing puede también puede ser de su interés, mira esto:

• How do I add 1px border to a div whose width is a percentage?

Answer 3

La forma más fácil de navegador cruzado es NO establecer el borde en los divs externos, y en su lugar establecerlo en un NUEVO div dentro de .left. Simple, y funciona bien.

Answer 4

Sólo cambia px a vw como

border-width: 10px; 

a

border-width: 10vw; 

Su cuál es el porcentaje no hacer ....