百分比布局是一种比较容易实现等比例缩放实现多分辨率显示的一种布局方式。要想实现百分比布局,就必须对他的父容器进行有效约束,下面就是约束代码:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width:100%;
height:100%;
}
.content{
width: 100%;
height: 100%;
background: red;
}
<body>
<div class="content"></div>
</body>
我们可以在content加入带有百分比为单位的宽高以及margin padding 等属性修饰的div子容器这样就实现了基本的布局。