如何让DIV随着左右滚动条移动,上下滚动条不变

如题所述

1、头部定义一个div,固定高度,设置绝对定位(position:absolute),设置上边距(top:0);
2、底部定义一个div,固定高度,设置绝对定位(position:absolute),设置下边距(bottom:0);
3、中间定义一个div,设置滚动条自动( overflow: auto); 设置绝对定位(position:absolute),设置top和bottom,top的值等于头部div的高度,bottom的值等于底部div的高度
示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title></title>
<style>
#page{margin:0 auto;width:960px;}
#header{width:960px; height:60px; position:absolute; top:0;background-color:#ccc;}
#footer{width:960px; height:30px; position:absolute; bottom:0; background-color:#ccc;}
#content{width:960px; overflow: auto; position:absolute; top:60px; bottom:30px;}
</style>

</head>
<body>
温馨提示:内容为网友见解,仅供参考
无其他回答

css如何实现div随滚动条移动css左右滚动条
如何让DIV随着左右滚动条移动,而上下滚动条保持不变?1。在头部定义一个div,固定高度,设置绝对位置(position:absolute),设置上边距(top:0);2.在底部定义一个div,固定高度,设置绝对位置(position:absolute),设置下边距(bottom:0);3.在中间定义一个div并自动设置滚动条(溢出:auto);设置绝对定位...

如何用div实现页面上下部分固定,中间部分随滚动条移动而移动的代码
1、头部定义一个div,固定高度,设置绝对定位(position:absolute),设置上边距(top:0);2、底部定义一个div,固定高度,设置绝对定位(position:absolute),设置下边距(bottom:0);3、中间定义一个div,设置滚动条自动( overflow: auto); 设置绝对定位(position:absolute),设置top和bottom,top的值等于头部...

DIV怎么设置滚动条
一、CSS基础认识 - TOPoverflow-y:scroll; 总是显示纵向滚动条overflow-y:visible : 不剪切内容也不添加纵向滚动条了解:overflow-y手册http:\/\/www.divcss5.com\/shouce\/c_overflowy.shtmloverflow-x:scroll; 总是显示横向滚动条overflow-x:visible : 不剪切内容也不添加横向滚动条了解:overflow-x手册...

如何让div滚动时页面不跟着滚动?
滚动条是容器所固有的,不管是外面的滚动条,还是里面的滚动条,只要让固定的div和body或者html容器脱离关系,即可实现DIV固定在页面而不随着滚动条随意滚动。1.html,body,将默认出现的滚动条,完全地隐藏,这样不管什么内容都不会出现了。2.virtual_body,写一个假的body,设置它的长宽为100%,这样利...

如何用div实现页面上下部分固定,中间部分随滚动条移动而移动的代码?
代码详情如下,直接使用即可!.content1{overflow: hidden;overflow-y:scroll;SCROLLBAR-FACE-COLOR:#205e17;SCROLLBAR-SHADOW-COLOR:#86ff92;SCROLLBAR-SHADOW-COLOR:#86ff92;SCROLLBAR-3DLIGHT-COLOR:#205e17;SCROLLBAR-TRACK-COLOR:#205e17;SCROLLBAR-DARKSHADOW-COLOR:#205e17;SCROLLBAR-BASE-...

怎么控制div随滚动条滚动js
第一种、滚动条滚动一定高度div也移动一定高度 及首先获取滚动条滚动的值即 oScroll = document.documentElement.scrollTop||document.body.scrollTop;然后把这个值赋值给div的top值 还有一种就是固定定位position:fixed; 始终固定在浏览器窗口的某一位置,不管浏览器滚动条怎么滚动他还是处于浏览器窗口(...

一个div 在页面的中间显示,当滑动滚动条的时候,div向上移动,移动到浏 ...
加载jquery插件 ebooking_fs这个换成要浮动的div的id <script type="text\/javascript"> \/\/search-box 随屏幕滚动 var _box_y = $("#ebooking_fs").offset().top;var _box_x = $("#ebooking_fs").offset().left;(window).scroll(function(){ if($(window).scrollTop() > _box_y){...

设置div滚动条滚动到指定位置?
div当中有滚动的时候,设置scrollTop可以滚动到指定的滚动顶部位置。如果需要动画,可以使用css3的过渡或者动画函数,jquery可以用animate函数。动态页面的操作(滚动屏幕到指定元素位置)和DIV滚动条滚动#第一种方法:focus(这个是元素正好在屏幕中间)targetElem=browser.find_element_by_xpath("\/\/a[@id='...

如何让DIV固定在页面而不随着滚动条随意滚动
1、首先我们新建一个web项目,主要用到了html文件和css文件。2、然后在html文件中,有图中的代码,引入css文件和设置一个div标签。3、然后这里是css样式文件,主要看图中红框中内容,使用fixed定位方式。4、然后运行项目后,可以看到div在右下角。5、然后滑动滚动条,即使到达底部后,div的位置依旧没有...

我有一个大div,里面有很多个小div,大div设置了滚动条,我想第一个小div...
设置滚动条的话只要是div内部的内容都会随着滚动条而移动;所以你想内容不受影响,那么就让它不要在div里面不就行了?比如设置绝对定位让div移动到位置,又或者是这个小div本来是与大div是同级的,你设置负值的外边距margin-bottom:-30px;就可以移动到下面去 ...

相似回答