css响应框宽度90%*95%，带5%5%0.5%边距

我试图实现的是：

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

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

你好
html，正文{
身高：100%；
}
#包裹{
背景色：红色；
宽度：100%；
身高：100%；
}
#内容{
背景色：青色；
宽度：90%；
身高：95%；
利润率：5%5%05%；
}

现场直播：

加上这个

   position:absolute;
   left:0;
   right:0;
   bottom:0;

至

#内容

也不要忘记添加

margin:0

到

正文

导致浏览器默认添加一些内容。

一种方法（简单且小）是在容器上使用css属性-

框大小：边框框

：例如

此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%;
}

---

检查并查找供应商前缀。乙二醇

---

-moz框大小：边框框

将以下代码写入文本编辑器，它就会工作

<style>
body{margin:0px;}
.contain {
background-color:black;
margin-top:5%;
margin-left:5%;
margin-right:5%;
min-height:95%;
}
</style>

<div class="contain">Content here
</div>

正文{margin:0px；}
.包含{
背景色：黑色；
利润率最高：5%；
左缘：5%；
保证金权利：5%；
最小高度：95%；
}
满足于此

您可以通过使用内容的平面属性来实现这一点 我尝试过这个方法，它可以工作并改变边距值，只需将其应用于内容

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

希望这是你期待的

---

重要的是要注意，垂直边距和填充是根据元素的宽度计算的，这与常识相反。如果仍要填充整个视口，请尝试使用

vh

和

vw

单位。