怎么让网页高度自适应pc端和笔记本

新建html文档。

书写hmtl代码。

书写css代码。.z_main{ position:relative; padding-left:180px;}.z_main .z_sub_nav{ position:absolute; left:0; background:#2e363f; width:180px;}.z_main .z_sub_nav .z_i1 a,.z_main .z_sub_nav .z_i2 a{ display:block; height:38px; line-height:38px; padding-left:50px;border-bottom:#37414b solid 1px;color:#939da8;}.z_main .z_sub_nav .z_i1 a{background:#27a9e3 url(../images/i1.png) no-repeat 20px center; color:#FFF;}.z_main .z_sub_nav .z_i2 a{ display:block; height:38px; line-height:38px;}.z_main .z_sub_nav .z_i2 a{ background:url(../images/i3.png); background-repeat:no-repeat; background-position:20px center;}.z_main .z_sub_nav .z_i2 a:hover{background-color:#27a9e3; color:#FFF;}.z_main .z_sub_nav .z_sub_nav_div{overflow:hidden; overflow-y:auto; display:block;}.z_main .z_sub_nav ul li a{ text-align:center; color:#939da8;display:block; height:38px; line-height:38px;background-color:#1e242b;background:url(../images/i5.png); background-repeat:no-repeat; background-position:40px center;}.z_main .z_sub_nav ul li a:hover,.z_main .z_sub_nav ul li .on{ background-color:#28b779; color:#fff;}.z_i3{ position:absolute; top:0; right:-20px; display:block; width:20px; height:40px; z-index:999999; overflow:hidden;}.z_i3 a{ display:block; width:20px; height:40px; font-size:0; text-indent:-200;}.z_i3 .z_open{background:url(../images/a1.png) no-repeat center center;}.z_i3 .z_close{background:url(../images/a2.png) no-repeat center center;}

书写并添加js代码。

代码整体结构。

查看效果。

手机验证方法需要自己用手机测试，这里是用的浏览器自带的手机测试环境。