1.为div设置百分比
<div class="header">
<div class="header-msg">
<span>最新报价：vs0052668</span>
<span>发布日期：2018-12-4</span>
</div>
</div>
<div class="top"></div>
<div class="container"></div>
<div class="footer"></div>
.header {
height: 10%;
border: 1px solid balck;
}
.header-msg {
float: right;
}
.top {
height: 40%;
border: 1px solid red;
}
.container {
height: 40%;
border: 1px solid blue;
}
.footer {
height: 9%;
border: 1px solid yellow;
}
设置高度后页面时
image.png
发现并不会出现预期的效果，原因是div的父级元素并没有设置高度，div没有参照物
所以在页面使用高度百分比时，要把页面中所有的父元素设置高度百分比
html,
body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
页面效果
image.png
达到预期效果
但是添加border：1px solid black;添加一个border后页面会出现滚动条，
image.png
此时利用css3中的属性
box-sizing:border-box;
box-sizing: content-box|border-box|inherit;
content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box:为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
inherit:规定应从父元素继承 box-sizing 属性的值。
使用宽度百分比时，也会出现类似的情况，也可用box-sizing解决问题。
