（插一条calc的属性详解）
vw ：Viewport width，即容器（可以是div）的宽度，默认1vw=整个视窗宽度的1%，全屏为100vw。比如视窗宽度为1200px，1vw=120px=1200px*1%，如果是满屏就则为100vw=1200px。
vh ：Viewport height，即容器（如div）的高度，默认1vh=整个可视窗口高度的1%，全屏是100vh。
2. calc（100vmin）也可以达到自适应的效果，但还是用起来效果一般
3. calc(100vw - px) vw是根据屏幕的大小来计算的，屏幕缩小，100vw也会变大
1、标签比如是块状元素，并且有个确定的宽度，百分比的宽度也行；padding的话, 设置成auto它会自动继承浏览器的padding值，因为有些奇葩浏览器是默认有padding值的，为了避免这个对样式造成影响，样式开头一般会加上一句*{margin:0padding:0}。
2、自适应，一般是自适应屏幕大小，比如我们的电脑、手机都有很多不同尺寸的屏幕，那么做出来的页面就要兼容这种尺寸的变化，而不会让布局错乱。
3、一般PC端布局样式是用百分比，不过移动端的话，因为对css3的兼容性非常好，所有要达到自适应，可以用css3来布局，当然还有比较流行的响应式布局。
4、层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
5、CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
告诉你一个非常好用的css样式，特别好用
box-sizing: border-box
即使加了padding或者margin属性都会有奇效哦
另外，你上面的滚动条改为overflow: auto
至于高度百分比问题，需要设置一下：
html,body{height:100%}
而且，你所设置80%高度的标签父级标签也要设一下，我随便写了一个案例，你看看，本来加了padding后实际显示的高度会大于设置的高度，但是加了box-sizing: border-box后，显示的高度还是50%
<style type="text/css">html,body{ height:100% margin:0 padding:0}
</style>
</head>
<body>
<div style=" height:100% background:red">
<div style=" height:600px background:blue">
<div style=" height:50% background:green padding:50px overflow:auto box-sizing: border-box">
<div style="height:1000px background:black color:white">这是内容部分</div>
</div>
</div>
</div>
</body>
