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

需求:

页面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;">&#xe608;</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呈现滚动条,而页面不存在滚动条

猜你喜欢

转载自hbiao68.iteye.com/blog/2288675
今日推荐