css 响应框宽度 90% * 95% with 5% 5% 0 5% margin

Question

我想要实现的是:

这似乎是不可能的。尝试了很多可能性。他们都没有工作。这是我认为应该有效的方法。

<div id="wrap">
    <div id="content">hello</div>
</div>

html,body{
    height:100%;
}

    #wrap{
        background-color:red;
        width:100%;
        height:100%;
    }

    #content{
        background-color:cyan;
        width:90%;
        height:95%;
        margin: 5% 5% 0 5%;
    }

直播:http://jsfiddle.net/vjb45/

Answer 1

一种方法(简单且小巧)是在容器上使用 css 属性 - box-sizing:border-box:例如 http://jsfiddle.net/6EfeC/

此 css 将允许您将边距/填充和宽度的完整值组合到一个单元中。

html,body{
    height:100%;
}

#wrap{
    background-color:red;
    width:100%;
    height:100%;
    box-sizing:border-box;
        /* for current ffox */
        -moz-box-sizing:border-box;
    padding:2.5% 5%;
}

#content{
    background-color:cyan;
    height:100%;
}

---

检查 - availablity和供应商前缀。例如

-moz-box-sizing:border-box