将head定位在顶端，content的高度设为100%
在content中嵌套一层，并指定padding-top的值为head的高度
是否OK？
.panel{
border: solid RGB(153,187,232) 1px
width: 300px
height: 200px
top:0px
left:0px
position:relative
}
.head{
width: 100%
height: 20px
border-bottom: solid RGB(153,187,232) 1px
background-color: RGB(217,231,248)
position:absolute
top:0left:0
}
.content{
background-color:gray
width:100%
height:100%
}
.content .area {
padding-top:21px
background-color:red
}
<div id="contentDiv" class="content">
<div class="area">adfadfadf</div>
</div>
锁屏效果的原理：共3层，最里面一层是网页的内容，其次一层是透明层，最外面一层是弹出窗口，而控制这三层显示先后顺序的是z-index值，z-index值越大越靠近外面，若理解不了，你可以这样想：在数学里，我们有学过直角坐标系吧，里面分为x轴、y轴、z轴，其中z-index你可以看成是z轴，z轴的值是不是，越往外，值越大。只要将这三层的z-index值设为不同，在最外面的弹出框那层z-index值设为最大，然后将中间那层的透明度改小一点，就好了。
