输入关键字或相关内容进行搜索
加了侧滑菜单的页面底部和顶部在中间content内容滑动的时候底部和顶部不能固定在一个位置，怎么改动？
&!DOCTYPE html&
&html&&head&
&meta charset=&utf-8&&
&meta name=&viewport& content=&width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no& /&
&title&&/title&
&script src=&js/mui.min.js&&&/script&
&link href=&css/mui.min.css& rel=&stylesheet& /&
&link href=&css/myapp.css& rel=&stylesheet& /&
&script type=&text/javascript& charset=&utf-8&&
mui.init();
//取消浏览器的所有事件，使得active的样式在手机上正常生效
document.addEventListener('touchstart', function() {
// 禁止选择
document.oncontextmenu = function() {
// H5 plus事件处理
var at = 100; // 默认动画时间
function plusReady() {
// 隐藏滚动条
plus.webview.currentWebview().setStyle({
scrollIndicator: 'none'
// Android处理返回键
plus.key.addEventListener('backbutton', function() {
if (confirm('确认退出？')) {
plus.runtime.quit();
}, false);
compatibleAdjust();
if (window.plus) {
plusReady();
document.addEventListener('plusready', plusReady, false);
// DOMContentLoaded事件处理
var _domReady =
document.addEventListener('DOMContentLoaded', function() {
_domReady =
compatibleAdjust();
}, false);
// 兼容性样式调整
var _adjust =
function compatibleAdjust() {
if (_adjust || !window.plus || !_domReady) {
// iOS平台使用div的滚动条
if (&iOS& == plus.os.name) {
document.getElementById('content').className = 'scontent';
// 预创建二级窗口
preateWebviews();
// 关闭启动界面
setTimeout(function() {
plus.navigator.closeSplashscreen();
// 处理点击事件
var _openw =
function clicked(id) {
if (_openw) {
_openw = preate[id];
if (_openw) {
if (_openw.showded) {
_openw.show('auto', at);
_openw.show('slide-in-right', at);
_openw.showded =
var wa = plus.nativeUI.showWaiting();
_openw = plus.webview.create(id, id, {
scrollIndicator: 'none',
scalable: false
preate: true
preate[id] = _
_openw.addEventListener('loaded', function() { //叶面加载完成后才显示
setTimeout(function() { //延后显示避免低端机上闪屏
wa.close();
_openw.show('slide-in-right', at);
_openw.showded =
}, false);
_openw.addEventListener('close', function() { //页面关闭后可再次打开
preate[id] && (preate[id] = null); //兼容窗口的关闭
}, false);
// 预创建二级页面
var preate = {};
function preateWebviews() {
preateWebivew('plus/webview.html');
var plist = document.getElementById('plist').
// 由于启动是预创建过多Webview窗口会消耗较长的时间，所以这里限制仅创建5个
for (var i = 0; i & plist.length && i & 2; i++) {
var id = plist[i].
id && (id.length & 0) && preateWebivew(id);
function preateWebivew(id) {
if (!preate[id]) {
var w = plus.webview.create(id, id, {
scrollIndicator: 'none',
scalable: false
preate: true
preate[id] =
w.addEventListener('close', function() { //页面关闭后可再次打开
preate[id] && (preate[id] = null); //兼容窗口的关闭
}, false);
// 清除预创建页面(仅)
function preateClear() {
for (var p in preate) {
var w = preate[p];
if (w && w.showded && !w.isVisible()) {
console.log('preateClear: ' + w.id);
w.close();
preate[p] =
&div class=&mui-off-canvas-wrap mui-draggable&&
&div class=&mui-inner-wrap&&
&header class=&mui-bar mui-bar-nav&&
&a class=&mui-action-menu mui-icon mui-icon-bars mui-pull-left&&&/a&
&a class=&mui-action-back mui-btn mui-btn-link mui-pull-right&&关闭&/a&
&h1 class=&mui-title&&缘来如此&/h1&
&nav class=&mui-bar mui-bar-tab&&
&a class=&mui-tab-item mui-active&&
&span class=&mui-icon mui-icon-home&&&/span&
&span class=&mui-tab-label&&首页&/span&
&a class=&mui-tab-item& onclick=&clicked('phone.html')&&
&span class=&mui-icon mui-icon-phone&&&/span&
&span class=&mui-tab-label&&电话&/span&
&a class=&mui-tab-item& onclick=&clicked('liudu/liuindex.html')&&
&span class=&mui-icon mui-icon-email&&&/span&
&span class=&mui-tab-label&&六度空间&/span&
&a class=&mui-tab-item&&
&span class=&mui-icon mui-icon-gear&&&/span&
&span class=&mui-tab-label&&设置&/span&
&aside id=&offCanvas& class=&mui-off-canvas-left&&
&ul class=&mui-table-view mui-table-view-chevron mui-table-view-inverted&&
&li class=&mui-table-view-cell&&
&a class=&mui-navigate-right&&
&li class=&mui-table-view-cell&&
&a class=&mui-navigate-right&&
&li class=&mui-table-view-cell&&
&a class=&mui-navigate-right&&
&div class=&mui-content&&
&div id=&slider& class=&mui-slider&&
&div class=&mui-slider-group mui-slider-loop&&
&div class=&mui-slider-item mui-slider-item-duplicate&&
&a href=&#&&
&img src=&http://dcloudio.github.io/mui/assets/img/yuantiao.jpg&&
&p class=&mui-slider-title&&
静静看这世界
&div class=&mui-slider-item&&
&a href=&#&&
&img src=&http://dcloudio.github.io/mui/assets/img/shuijiao.jpg&&
&p class=&mui-slider-title&&
幸福就是可以一起睡觉
&div class=&mui-slider-item&&
&a href=&#&&
&img src=&http://dcloudio.github.io/mui/assets/img/muwu.jpg&&
&p class=&mui-slider-title&&
想要一间这样的木屋，静静的喝咖啡
&div class=&mui-slider-item&&
&a href=&#&&
&img src=&http://dcloudio.github.io/mui/assets/img/cbd.jpg&&
&p class=&mui-slider-title&&
Color of SIP CBD
&div class=&mui-slider-item&&
&a href=&#&&
&img src=&http://dcloudio.github.io/mui/assets/img/yuantiao.jpg&&
&p class=&mui-slider-title&&
静静看这世界
&div class=&mui-slider-item mui-slider-item-duplicate&&
&a href=&#&&
&img src=&http://dcloudio.github.io/mui/assets/img/shuijiao.jpg&&
&p class=&mui-slider-title&&
幸福就是可以一起睡觉
&div class=&mui-slider-indicator mui-text-right&&
&div class=&mui-indicator mui-active&&&/div&
&div class=&mui-indicator&&&/div&
&div class=&mui-indicator&&&/div&
&div class=&mui-indicator&&&/div&
&div class=&mui-card&&
&ul class=&mui-table-view mui-grid-view mui-grid-9&&
&li class=&mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3&&
&a href=&myphoto.html&&
&span class=&mui-icon mui-icon-image&&&/span&
&div class=&mui-media-body&&相册&/div&
&li class=&mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3&&
&a href=&member/member.html&&
&span class=&mui-icon mui-icon-contact&&&/span&
&div class=&mui-media-body&&交友&/div&
&li class=&mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3&&
&a href=&date/date.html&&
&span class=&mui-icon mui-icon-email&&&span class=&mui-badge&&5&/span&&/span&
&div class=&mui-media-body&&同城约会&/div&
&li class=&mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3&&
&a href=&#&&
&span class=&mui-icon mui-icon-chatbubble&&&/span&
&div class=&mui-media-body&&心情日记&/div&
&li class=&mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3&&
&a href=&#&&
&span class=&mui-icon mui-icon-location&&&/span&
&div class=&mui-media-body&&爱情求助&/div&
&li class=&mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3&&
&a href=&#&&
&span class=&mui-icon mui-icon-search&&&/span&
&div class=&mui-media-body&&成功故事&/div&
&li class=&mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3&&
&a href=&#&&
&span class=&mui-icon mui-icon-phone&&&/span&
&div class=&mui-media-body&&许愿池&/div&
&li class=&mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3&&
&a href=&#&&
&span class=&mui-icon mui-icon-gear&&&/span&
&div class=&mui-media-body&&设置&/div&
&li class=&mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3&&
&a href=&#&&
&span class=&mui-icon mui-icon-info&&&/span&
&div class=&mui-media-body&&关于我们&/div&
var content = document.querySelector('.mui-content');
var toggle = document.getElementById('M_Toggle_Grid_Carded');
var card = document.querySelector('.mui-card');
var grid = document.querySelector('.mui-grid-view');
toggle.addEventListener('toggle', function(event) {
var isActive = event.detail.isA
if (isActive) {
card.appendChild(grid);
card.style.display = '';
content.appendChild(grid);
card.style.display = 'none';
mui.init({
swipeBack: false,
var offCanvas = mui('#offCanvas');
document.querySelector('.mui-icon-bars').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//
offCanvas.offCanvas('show');
document.querySelector('.mui-action-back').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//
offCanvas.offCanvas('hide');
使用原生加速的侧滑菜单时，删掉开头的两个div节点即可：&div class=&mui-off-canvas-wrap mui-draggable&&&div class=&mui-inner-wrap&&
我也遇到这个问题了 。。 最后怎么解决的
要回复问题请先或
浏览: 1704
关注: 3 人欢迎您来到网页代码站！
如果您关闭了浏览器的javascript，可能导致页面部分功能无法显示，请开启javascript以便正常浏览本网页。网页代码站()谢谢您的支持！
您的当前位置： >>
>> JS+CSS实现把DIV固定在指定位置
JS+CSS实现把DIV固定在指定位置
分类：&&&时间：&&&点击：&&&关键词：|||||
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&title&JS+CSS实现把DIV固定在指定位置_网页代码站()&/title&
&style type=&text/css&&
*{padding:0;margin:0;}
#diya{width:200height:100background:#F45;position:left:100top:50z-index:5;}
#bod{width:400height:400position:overflow:background:#03C;top:25}
&div id=&bod&&
&div id=&diya&&&/div&
&p style=&height:2000&&&/p&
&script type=&text/javascript&&
function fixedTitle(con,con2){
var bod = document.getElementById(con);
var diya=document.getElementById(con2);
var Ntop=diya.offsetT
var tt=100;
var bid=Ntop-
bod.onscroll=
function ss(){
var jia=bod.scrollT
if(jia&=Ntop){
diya.style.top=Ntop+'px';
diya.style.top=jia+bid+'px';
fixedTitle(&bod&,&diya&)
&p&&a href=&&&网页代码站&/a& - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！&/p&
始终固定在网页的某个位置的菜单，也可以是一个区域，配合JavaScript共同实现的功能，拖动滚动条可见到此效果，兼容火狐、Chrome及Opera等浏览器。
一、如果您使用的浏览器版本为IE6.0、360浏览器V3.0.8.1版本或者IE的更低版本浏览本页面，建议您升级浏览器至IE7以上，上面的“运行”按钮可能不能用，但您可按以下方式查看。运行代码方式：1、点击“复制”按钮；2、在桌面建立一个txt文档；3、粘贴复制的代码；4、最后把txt的扩展名改为“htm”或“html”；5、完成，打开即可看到效果。二、如果您使用FireFox或者非IE浏览器，建议您使用IE7以上版本。上面的“复制”按钮失效，请您“全选”，以普通方式复制！三、某些代码因需加载完Jquery等之类比较大的JS文件，如果您看不到效果，请您刷新页面！四、某些代码不能完全兼容各浏览器，还请您再次修改才能使用！给您带来的不便！尽请谅解！谢谢您的支持！
Powered by (网页即"web" + 代码即"dm" + "cn" = ) | 最专业的代码下载网站 - 致力为中国站长提供高质量的代码！Web开发（6）
开发总结（10）
web页面可能需要在顶部和顶部做一个固定的导航栏，就像手机页面一样，可以用如下css实现：
bottom:0;(顶部的话top:0;)
z-index:999;(这个是为了让网页的其他内容显示在它的下方）
在实际操作中，有可能这个对整个div不起作用，当这个div包含较多内容的时候，这个时候就得对里面的内容一个一个固定了，此时得注意左右的距离问题，这种情况我直接用的margin-left来控制的。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1116次
排名：千里之外
原创：21篇
(6)(5)(10)如何将div固定在页面最顶部,最底部&兼容ie6
在IE6中是不能直接使用 position: 。需要一些 CSS Hack 来解决它。当然，IE6 的问题也不仅仅
元素固定在的底部和距离右边的20个像素：
& position:_position:
&bottom:0;
& right:5%;
& _bottom:
&&&_top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
right 跟 left 属性可以用的办法解决，而 top 跟 bottom 就需要用上面的表达式来实现。其中在
_position: 中的 _ 符号只有 IE6 才能识别，目的是为了区分其他浏览器。
上面的只是一个例子，下面的才是最重要的代码片段：
使元素固定在浏览器的顶部：
_position:
&_top:expression_r(eval_r(document.documentElement.scrollTop));
使元素固定在浏览器的底部：
_position:
&_top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
这两段代码只能实现在最底部跟最顶部，你可以使用
_margin-top:10
_margin-bottom:10
修改其中的数值控制元素的位置。
position: 闪动问题
现在，问题还没有完全解决。在用了上面的办法后，你会发现：被固定定位的元素在滚动的时候会闪动。解决闪动问题的办法是在 CSS 文件中加入：
background-image:url(about:blank);
background-attachment:
其中 * 是给 IE6 识别的。
到此，IE6 的 position: 问题已经被解决了。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。div footer标签css实现位于页面底部固定
作者：佚名
字体：[ ] 来源：互联网 时间：12-02 12:57:14
Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见,本文将介绍两种解决方案，需要了解的朋友可以参考下
作为一个页面仔你一定遇到过：当一个HTML页面中含有较少的内容时，Web页面的&footer&部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的&footer&部分永远固定在页面的底部呢？先来看下下面的代码吧 这是第一种方案，后面还有几种 HTML代码 代码如下: &div class="container"& &div class="header"&这是头部&/div& &div class="page clearfix"& &div class="left"&left sidebar&/div& &div class="content"&main content&/div& &div class="right"&right sudebar&/div& &/div& &div class="footer"&footer section&/div& &/div& CSS代码 代码如下: html,body{margin:0;padding:0;height:100%} .container{min-height:100%;height:auto !height:100%;/*ie6不识别min-height,如上述处理*/position:} .header{background:#ff0;padding:10} .page{width:960margin:0padding-bottom:60/*padding等于footer的高度*/} .footer{position:bottom:0;width:100%;height:60/*footer的高度*/background:#6clear:} .left{width:220height:800float:margin-right:20background:} .content{background:width:480float:margin-right:20} .right{width:220float:background:} .clearfix:after, .clearfix:before{content:"";display:table} .clearfix:after{clear:overflow:hidden} .clearfix{zoom:1;} 实现这页脚永远固定在页面的底部，我们只需要四个div，其中div#container是一个容器，在这个容器之中，我们包含了div#header（头部），div#page（页面主体部分，我们可以在这个div中增加更多的div结构，如上面的代码所示），div#footer（页脚部分） 下面我们一起来看看这种方法的实现原理： &html&和&body&标签：html和body标签中必须将高度(height)设置为&100%&,这样我们就可以在容器上设置百分比高度，同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0； div#container容器：div#container容器必须设置一个最小高度(min-height)为100％；这主要使他在内容很少（或没有内容）情况下，能保持100％的高度，不过在IE6是不支持min-height的，所以为了兼容IE6，我们需要对min-height做一定的兼容处理，具体可以看前面的代码，另外我们还需要在div#container容器中设置一个&position:relative&以便于里面的元素进行绝对定位后不会跑了div#container容器； div#page容器：div#page这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div#footer的高度（height）值，当然你在div#page中可以使用border-bottom人水-width来替代padding-bottom，但有一点需要注意，此处你千万不能使用margin-bottom来代替padding-bottom，不然会无法实现效果； div#footer容器：div#footer容器必须设置一个固定高度，单位可以是px(或em)。div#footer还需要进行绝对定位，并且设置bottom:0；让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。你也可以给div#footer加设一个&width:100%&，让他在整个页面上得到延伸； 其他div：至于其他容器可以根据自己需求进行设置，比如说前面的div#header,div#left,div#content,div#right等。 优点： 结构简单清晰，无需js和任何hack能实现各浏览器下的兼容，并且也适应iphone。 缺点： 不足之处就是需要给div#footer容器设置一个固定高度，这个高度可以根据你的需求进行设置，其单位可以是px也可以是em，而且还需要将div#page容器的padding-bottom（或border-bottom-width）设置大小等于（或略大于）div#footer的高度，才能正常运行。 方法二： 这种方法是利用footer的margin-top负值来实现footer永远固定在页面的底部效果，下面我们具体看是如何实现的。 HTML代码 代码如下: &div id="header"&header&/div& &div id="page" class="clearfix"& &div id="left"&left sidebar&/div& &div id="content"&main content&/div& &div id="right"&right sidebar&/div& &/div& &/div& &div id="footer"&footer&/div& CSS代码 代码如下: html,body{height:100%;margin:0;padding:0;} #container{min-height:100%;height:auto !height:100%;} #page{padding-bottom:60/*等于或者大于footer的高度*//*border-bottom-width:60边框宽度也可以*/} #header{padding:10background:} #footer{position:margin-top:-60/*等于footer的高度*/height:60clear:background:#c6f;} #left{width:18%;float:margin-right:2%;background:} #content{width:60%;float:margin-right:2%;background:} #right{width:18%;float:background:} .clearfix:after{visibility:height:0;font-size:0;display:content:" ";clear:} * html .clearfix{zoom:1;}/* ie6 */ *:first-child+html .clearfix{zoom:1;} /* ie7 */ 上面的代码是最基本的HTML Code，同时你也发现了div#footer和div#container是同辈关系，不像方法一，div#footer在div#container容器内部。当然你也可以根据你的需要把内容增加在div#container容器中，如：一个三列布局，而且还带有header部分。 方法一和方法二有几点是完全相同的，比如说方法一中的1-3三点，在方法二中都一样，换句话说，方法二中也需要把html,body高度设置为100%,并重置margin,padding为0；其二div#container也需要设置min-height:100%,并处理好IE6下的min-height兼容问题；其三也需要在div#page容器上设置一个padding-bottom或border-bottom-width值等于div#footer高度值（或略大于）。那么两种方法不同之处是： div#footer放在div#container容器外面，也就是说两者是同级关系，如果你有新元素需要放置在与div#container容器同级，那你需要将此元素进行绝对定位，不然将会破坏div#container容器的min-height值； div#footer进行margin-top的负值设置，并且此值等于div#footer的高度值，而且也要和div#page容器的padding-bottom(或border-bottom-width)值相等。 优点： 结构简单清晰，无需js和任何hack能实现各浏览器下的兼容。 缺点： 要给footer设置固定值，因此无法让footer部分自适应高度。
大家感兴趣的内容
12345678910
最近更新的内容