页面不出现滚动条，局部有滚动条

需求：

页面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呈现滚动条，而页面不存在滚动条。

 



 




大小: 82.7 KB
查看图片附件