Ancho de píxel y porcentaje en Proporción

Question

Creo que ya puedo saber la respuesta a esta, pero necesito un control de cordura.

Decir que tengo

#gridtest{ 
width:590px; 
} 

pudiera cambiar la anchura a un porcentaje mediante el uso de RESULT = META/contexto. En este caso, el contexto es un contenedor con un ancho máximo puse a 1000 píxeles por lo que puedo hacer esto:

#gridtestpercent{ 
width:59%; /*590/1000*/ 
} 

Si tuviera que reducir la ventana por la div estaría siempre en la proporción a la de su contenedor. Pero lo que si lo que quería hacer

#gridtest{ 
width:570px; 
border:10px solid red; 
} 

puedo trabajar el ancho en base a la meta ahora es 570, pero ya que la ventana está reducido las proporciones van todos fuera de sincronía.

#gridtestpercentnoborder{ 
width:57%; /*570/1000*/ 
border:10px solid red; 
} 

No puedo usar el borde porcentual. No quiero usar JS para seguir comprobando el contexto y aún no puedo usar la declaración de borde de caja de CSS3.

Si quisiera utilizar la técnica descrita en el diseño web sensible de Ethan Marcotte, donde todo se reduce en relación entre sí, ¿no tendré suerte si utilizo un borde?

¡Salud!

Answer 1

Lamentablemente, sí, no tiene suerte. Una manera ingeniosa de evitar este problema es con un contenedor div que usa para crear su borde. Por lo tanto, el div exterior sería del 57% (en su ejemplo) con un fondo que es del color del borde deseado. Entonces, el div interno tendría un ancho de 96% más o menos (juegue con el número exacto para encontrar un borde apropiado para su diseño).

Answer 2

Si desea permanecer semántico puede usar div { box-sizing:border-box; } o algunos elementos :after absolutamente posicionados. Ver el puesto How do I add 1px border to a div whose width is a percentage?

Answer 3

Se podría utilizar un recuadro box-shadow en lugar de una frontera:

box-shadow: 0px 0px 0px 10px red inset; 

almohadilla Sólo el interior del recipiente para compensar.

Editar: Escribo "pad" pero, por supuesto, si usa relleno, perderá las dimensiones de la caja. Margen el contenido dentro en su lugar.

Answer 4

Este enlace da buena explicación sobre dos soluciones para este problema:

http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/

Answer 5

usted podría utilizar CSS3 calc() función,

.selector{ 
    border: 5px solid black; 
    width: -moz-calc(50% - 10px); 
    width: -webkit-calc(50% - 10px); 
    width: calc(50% - 10px); 
} 

SASS mixin

@mixin calc($property, $expression) { 
    #{$property}: -moz-calc(#{$expression}); 
    #{$property}: -webkit-calc(#{$expression}); 
    #{$property}: calc(#{$expression}); 
} 
article { 
    border: 1px solid red; 
    @include calc(width, '100% - 2px') 
} 

Answer 6

Si posible, dependiendo de su diseño, lo que me gusta hacer es poner el borde como un div absoluto con un ancho de 3px (por ejemplo) y una altura más alta que su div principal. Luego configuré el desbordamiento oculto en el div principal.

Answer 7

La respuesta aceptada no es correcta. De hecho, tienes 2 opciones:

utilizar la propiedad box-sizing, por lo que todos los rellenos y las fronteras se consideran parte del tamaño:

.column { 
    width: 16%; 
    float: left; 
    margin: 0 2% 0 2%; 
    background: #03a8d2; 
    border: 2px solid black; 
    padding: 15px; 
    font-size: 13px; 

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

O, utilice la propiedad outline lugar de la propiedad frontera. Aún tendrá problemas con los rellenos, pero es más fácil agregarlos. Ejemplo:

.column { 
    width: 16%; 
    float: left; 
    margin: 0 2% 0 2%; 
    background: #03a8d2; 

    outline: 2px solid black; 
} 

explicación completa: http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/

Answer 8

En CSS3 también se puede utilizar el nuevo box-sizing propiedad para incluir el píxel y el relleno cuentan en el width del elemento:

box-sizing: border-box;