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

最新推荐文章于 2024-05-11 15:56:02 发布

胖鹅68

最新推荐文章于 2024-05-11 15:56:02 发布

阅读量3.2k

点赞数 2

分类专栏： css 、 css3、sass、less

本文链接：https://blog.csdn.net/hbiao68/article/details/52683369

版权

css 、 css3、sass、less 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

需求：

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