像素边框和百分比宽度

问题描述：

我想我可能已经知道这个问题的答案，但我需要一个理智检查！像素边框和百分比宽度

说我有

#gridtest{ 
width:590px; 
}

我可以通过使用RESULT = TARGET/CONTEXT宽度改变的百分比。在这种情况下，上下文是一个最大宽度设置为1000像素，所以我能做到这一点的容器：

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

如果我要缩小窗口下的股利将始终在按比例其容器。但是，如果我想要做

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

我可以工作宽度出立足现在的目标是570，但作为窗口被缩小比例全力以赴同步。

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

我无法使用百分比边框。我不想使用JS继续检查上下文，并且我还不能使用CSS3框边界声明。

如果我想使用Ethan Marcotte在响应式网页设计中描述的技术，那么所有东西都会相互缩小，如果使用边框，我会不幸运？

干杯！

答

不幸的是，你运气不好。解决这个问题的一个方法就是用一个包装div来创建你的边框。所以外部div将是57％（在你的例子中）背景是你想要的边框的颜色。然后，内部div将有96％左右的宽度（玩确切的数字来找到适合您的设计的边框）。

感谢这个 - 我真的很想避免这样做，但至少有一个解决方案，如果我遇到它。另一个稍微有些黑客的方式是为边界提供多个背景图片，但目前这并不是十分跨浏览器。 – user1010892

是的，多个背景在旧浏览器中不起作用;然而，它不会像使用边框那样破坏任何东西。所以也许这是一个优雅而有辱人格的选择。 –

是的，这是一个好点 – user1010892

答

如果你想保持语义，你可以使用div { box-sizing:border-box; }或一些绝对定位的:after元素。看到帖子How do I add 1px border to a div whose width is a percentage?

答

你可以使用，而不是一个边界插图的box-shadow：

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

只是垫在容器内进行补偿。

编辑：我写“垫”，但当然，如果你使用填充，它会抛出箱的尺寸。改为保留内部的内容。

箱阴影有一个性能开销，应该谨慎使用 - 特别是在低端和移动设备 – Ruskin

答

这个链接给出了两个方案来解决这个问题很好解释：

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

答

你可以使用CSS3 计算（）功能，

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

SASS混入

@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') 
}

这真棒！感谢提示好友！ – mXX

答

如果可能的，取决于你的设计，我喜欢做的是把边框作为一个宽度为3px（例如）和高于其父div的高度的绝对div。然后我设置隐藏在父div上的溢出。

答

接受的答案不正确。实际上，你有两个选择：

使用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/

这适用于我正在做的工作 - 在移动视口上处理基于百分比的容器以实现响应式设计。虽然我通常不使用盒子大小，因为它不是最受支持的属性 - 对于我需要的平台上的流体容器来说，它工作得很好。完善！ –

答

CSS3中，您还可以使用新的box-sizing属性包括像素填充算成元素的width：

box-sizing: border-box;

像素边框和百分比宽度

相关推荐