像素边框和比例中的百分比宽度

Question

我想我可能已经知道了这个问题的答案,但我需要进行健全检查!

说我有

#gridtest{
width:590px;
}

我可以使用RESULT = TARGET/CONTEXT将宽度更改为百分比.在这种情况下,上下文是一个容器,其最大宽度设置为1000px,所以我可以这样做:

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

如果我要缩小窗口,div将始终与其容器成比例.但是,如果我想做什么呢

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

我可以根据现在为570的目标来处理宽度,但随着窗口缩小,所有比例都不同步.

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

我不能使用百分比边框.我不想使用JS继续检查上下文,我还不能使用CSS3 box-border声明.

如果我想使用Ethan Marcotte在响应式网页设计中描述的技术,如果使用边框,那么一切都会相互缩小,那么我会失败吗？

干杯!

Answer 1

你可以使用CSS3 calc()函数,

.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 2

您可以使用插入框阴影而不是边框​​:

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

只需填充容器内部即可进行补偿.

编辑:我写"pad"但当然如果你使用填充它会甩掉盒子尺寸.保证内容的内容.

Answer 3

接受的答案是不正确的.你实际上有两个选择:

使用该box-sizing属性,因此所有填充和边框都被视为大小的一部分:

.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;
}

或者,使用outline属性而不是border属性.您仍然会遇到填充问题,但更容易添加.例:

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

    outline: 2px solid black;
}

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

Answer 4

不幸的是,是的,你运气不好.绕过这个问题的一种黑客方法是使用一个div用于创建边框的包装器.因此,外部div将是57%(在您的示例中),背景是您所需边框的颜色.然后,内部div的宽度为96%左右(使用确切的数字来找到适合您设计的边框).