边框宽度百分比 [重复]答案

【问题标题】：Border width percentage [duplicate]边框宽度百分比 [重复]
【发布时间】：2014-02-25 09:22:20
【问题描述】：

我现在正在使用这些代码来实现页面两侧的边框。

<style>
body {
border-left: 168px solid #F5E5D6;
border-right: 168px solid #F5E5D6;
}
</style>

在我的屏幕分辨率下看起来很棒。不幸的是，对于其他分辨率，页面会变形。那么也许知道如何将“168px”更改为屏幕的 9%？

【问题讨论】：

出于您的目的，使用单独的包装元素可能更容易，在本例中为根<html>：fiddle.jshell.net/9yF62/1 否则，请参阅@CTravel 链接的问题的 Javascript 解决方案。视口单元应该能够做到这一点，但在 Chrome 和 not supported at all in older browsers: fiddle.jshell.net/9yF62 中非常有缺陷：fiddle.jshell.net/9yF62（尝试调整图像大小）
@AmeliaBR 非常感谢你们两位，先生。我终于用这个：fiddle.jshell.net/9yF62/1来解决问题了。

【解决方案1】：

使用viewport length units，您可以这样做：

body {
    border-left: 9vw solid #F5E5D6;
    border-right: 9vw solid #F5E5D6;
}

9vw 表示“视口宽度的 9%”。但是请注意，IE More info here on browser support.

【讨论】：