我有一个有两行的页面,它应该是流畅的,100%高和宽,并且绝对定位了行。
以下是代码:
<div id="wrapper">
<div class="toprow">
<p>Top</p>
</div>
<div class="bottomrow">
<div class="inner">
<p>Bottom</p>
</div>
</div>
</div>
.toprow {
position: absolute;
top: 0;
bottom: 45%;
width: 100%;
background: green;
}
.bottomrow {
position: absolute;
top: 55%;
bottom: 0;
width: 100%;
background: red;
}
.inner{
width: 98%;
height: 95%;
padding: 1%;
background: #00f;
}
.inner p{
background: white;
}
在第二行的内包装上,我添加了1%的填充。因此,如果任何一侧有一个百分比填充,我现在需要包装器内的div的宽度为98%。逻辑。
为什么这个工作不适合高度?如果你看下面我的jsfiddle,你会看到高度需要设置为超过95%以适应包装,即使顶部和底部只有1%的填充。
答案 0 :(得分:1)
您可以使用box-sizing属性。
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
答案 1 :(得分:0)
将html和body的边距设置为零,然后将框模型更改为box-sizing:border-box
以在尺寸调整中包含填充:
https://jsfiddle.net/d86o8L02/2/
html, body {
margin:0; /* < remove default margins */
}
.toprow {
position: absolute;
top: 0;
bottom: 45%;
width: 100%;
background: green;
}
.bottomrow {
position: absolute;
top: 55%;
bottom: 0;
width: 100%;
background: red;
}
.inner{
width: 100%; /* < make 100% */
height: 100%; /* < make 100% */
padding: 1%;
background: #00f;
box-sizing: border-box; /* < change box model */
}
.inner p {
background: white;
}
&#13;
<div id="wrapper">
<div class="toprow">
<p>Top</p>
</div>
<div class="bottomrow">
<div class="inner">
<p>Bottom</p>
</div>
</div>
</div>
&#13;