像素边界和百分比宽度的比例

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框边声明。

如果我想使用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

不幸的是，是的，你运气不好。一个hack的方法来解决这个问题是用包装器div，你用它来创建你的边界。因此，外部div将是57%(在您的示例中)，背景颜色是您想要的边界。然后，内部div的宽度将为96%左右(使用确切的数字来找到适合您的设计的边界)。

Answer 5

如果你想保持语义，你可以使用div { box-sizing:border-box; }或一些绝对定位的:after元素。看到帖子我如何添加1px边界的div，其宽度是一个百分比?

Answer 6

在CSS3中，您还可以使用新的box-sizing属性将像素和填充计数包含到元素的width中:

box-sizing: border-box;

Answer 7

如果可能的话，根据你的设计，我喜欢做的是把边界作为一个绝对的div，宽度为3px(例如)，高度高于它的父div。然后我在父div上设置了隐藏的溢出