需求:
页面header 固定在头部,footer固定在尾部,中间为内容。
中间内容可以无限添加内容,那么滚动条就是在中间的容器中,不管怎么滑动内容,顶部和尾部都是固定不动
解决办法:
<!-- header --> <div class="relative overflow_hidden height_35px " id="headerContent" style="z-index: 888;"> <img src="../images/top_bg.png" class="all_width height_35px absolute" style="left: 0;top: 0;"> <span class="icon iconfont absolute font_18 color_fff" style="left: 10px;top:6px;z-index: 4;"></span> <div class="absolute all_width line_height_35px text-center font_18 color_fff" style="top: 0;left: 0;height: 30px;">周定</div> </div> <!-- middle content --> <div class="absolute all_width" id="scrollContent" style="top: 35px;left: 0px;overflow: auto;bottom: 1px;"> <div class="relative" style="overflow: auto"> ... ... </div> </div> <!-- footer --> <div class="fixed color_fff all_width line_height_40px" style="bottom: 0px;left: 0px;"> <div class="float_right width_120px text-center pointer" style="background-image: url(../images/orderBtn.png);background-size: contain"> 立即订购 </div> <div class="margin_right_120 bg_000"> <span class="clearfix"></span> </div> </div>
代码分析:
中间部分的代码是绝对定位,距离顶部35px,距离底部1px;那么代码中间div的内容就是在一个页面内,只是中间div呈现滚动条,而页面不存在滚动条