当前位置：编程学习 > C#/ASP.NET >>

DIV,不随屏幕滚动

搜狐主页上有一个DIV,不随屏幕滚动，效果很好！哪位大侠给破解一下是怎么做的？谢谢！ --------------------编程问答-------------------- css 浮动：fixed   如果要兼容ie6  需要写hack --------------------编程问答-------------------- float

css简单应用

也可以用绝对定位 --------------------编程问答-------------------- #NotMoveDIV{positon:fixed;z-index:999;top:0px;left:0px;width:100%;height:25px;line-height:25px;} --------------------编程问答-------------------- 试了，好像都不行，它要在最上层，还不随屏幕滚动，还请再赐教。
--------------------编程问答-------------------- #NotMoveDIV{position:fixed;z-index:999;top:0px;left:0px;width:100%;height:25px;line-height:25px;background:#ff0000;} 
调试通过，刚才position单词拼写错了。 --------------------编程问答-------------------- 5楼正解 --------------------编程问答-------------------- 还是不行，它要在最上层，还不随屏幕滚动，还请老师试一下，谢赐教。
--------------------编程问答-------------------- 不会吧，把你的HTML代码贴出来看看。 --------------------编程问答-------------------- 还有CSS一并贴出来。 --------------------编程问答-------------------- z-index:999 控制上下顺序 值越大越上面(同1父标签下：position:relative)，最大值  int32 --------------------编程问答-------------------- 请看一下我的HTML、css代码：
HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</HEAD>

<BODY>
<div id="0001" >
要求：在最上面，还固定不动，网页其他内容在其下面滚动。见搜狐主页上方第一行。
</div>
<table width="300" height="500" border="1">
  <tr>
    <td height="300" bgcolor="#FFFFCC"> </td>
  </tr>
  <tr>
    <td height="300" bgcolor="#CCCCFF"> </td>
  </tr>
  <tr>
    <td height="300" bgcolor="#CCFFFF"> </td>
  </tr>
</table>

</BODY>
</HTML>


css：

#0001 {
positon:fixed;
z-index:999;
top:0px;
left:0px;
width:100%;
height:25px;
line-height:25px;
background-image: url(toolbar_bg_v_110928.gif);
--------------------编程问答-------------------- 你这里有三个错误：
1、没有加上标准，在HTML上页面加上标准<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">，并把HTML标签换成<html xmlns="http://www.w3.org/1999/xhtml" >
也就是说上面的头部写成:
<!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" >
2、css命名错误，不能以阿拉伯数字开头，id命名可命名成t0001,css里面写#t0001{}
3、第三个错误是我造成的，不好意思哈，是我开始的时候position拼写错成positon;解决这三个，测试通过。 --------------------编程问答-------------------- 最后写成这样：
<!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" >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

#t0001{position:fixed;

z-index:999;

top:0px;

left:0px;

width:100%;

height:25px;

line-height:25px;

}

</style>

</head>



<body>

<div id="t0001" >

要求：在最上面，还固定不动，网页其他内容在其下面滚动。见搜狐主页上方第一行。

</div>

<table width="300" height="500" border="1">

  <tr>

  <td height="300" bgcolor="#FFFFCC"> </td>

  </tr>

  <tr>

  <td height="300" bgcolor="#CCCCFF"> </td>

  </tr>

  <tr>

  <td height="300" bgcolor="#CCFFFF"> </td>

  </tr>

</table>



</body>

</html>

--------------------编程问答-------------------- 高！一试成功。感谢lizhengdao1314，谢谢！ --------------------编程问答-------------------- 哈哈，传到服务器上就不行了，还请指点！ --------------------编程问答-------------------- position:fixed;不是所有的浏览器都支持的。不支持的浏览器需要使用js 实现定位 --------------------编程问答-------------------- 请给一个具体的解决方案。 --------------------编程问答-------------------- 兼容IE6/IE7/IE8/IE9/Firefox/Chrome/Safari/Oprea浏览器的浮动代码
<%@ Page Language="C#" %>

<!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">

<head>

<style type="text/css">

html,body{margin:0;padding:0;}

#y1 {position:fixed;top:0;left:0;width:100px;height:100px;border:1px solid red;}

#y2 {position:fixed;top:0;right:0;width:100px;height:100px;border:1px solid red;}

#y3 {position:fixed;bottom:0;left:0;width:100px;height:100px;border:1px solid red;}

#y4 {position:fixed;bottom:0;right:0;width:100px;height:100px;border:1px solid red;}

</style>

<!--[if lte IE 6]>

<style>

#y1 {position:absolute;}

#y2 {position:absolute;}

#y3 {position:absolute;}

#y4 {position:absolute;}

</style>

<![endif]-->



<script type="text/javascript">

  //以下所有脚本只为IE6写，其他浏览器完全可以删除。

  function getViewportScrollX() {

    var scrollX = 0;

    if (document.documentElement && document.documentElement.scrollLeft) {

      scrollX = document.documentElement.scrollLeft;

    }

    else if (document.body && document.body.scrollLeft) {

      scrollX = document.body.scrollLeft;

    }

    else if (window.pageXOffset) {

      scrollX = window.pageXOffset;

    }

    else if (window.scrollX) {

      scrollX = window.scrollX;

    }

    return scrollX;

  }



  function getViewportScrollY() {

    var scrollY = 0;

    if (document.documentElement && document.documentElement.scrollTop) {

      scrollY = document.documentElement.scrollTop;

    }

    else if (document.body && document.body.scrollTop) {

      scrollY = document.body.scrollTop;

    }

    else if (window.pageYOffset) {

      scrollY = window.pageYOffset;

    }

    else if (window.scrollY) {

      scrollY = window.scrollY;

    }

    return scrollY;

  }



  function getViewportWidth() {

    var width = 0;

    if (document.documentElement && document.documentElement.clientWidth) {

      width = document.documentElement.clientWidth;

    }

    else if (document.body && document.body.clientWidth) {

      width = document.body.clientWidth;

    }

    else if (window.innerWidth) {

      width = window.innerWidth - 18;

    }

    return width;

  }



  function getViewportHeight() {

    var height = 0;

    if (window.innerHeight) {

      height = window.innerHeight - 18;

    }

    else if (document.documentElement && document.documentElement.clientHeight) {

      height = document.documentElement.clientHeight;

    }

    else if (document.body && document.body.clientHeight) {

      height = document.body.clientHeight;

    }

    return height;

  }



  if (navigator.userAgent.indexOf("MSIE 6") > -1 && navigator.userAgent.indexOf("MSIE 7") == -1 && navigator.userAgent.indexOf("MSIE 8") == -1) {

    window.ononload = window.onscroll = window.onresize = function (e) {

      var t = getViewportScrollY();

      var l = getViewportScrollX();

      var w = getViewportWidth();

      var h = getViewportHeight();

      document.getElementById("y1").style.left = l + "px";

      document.getElementById("y1").style.top = t + "px";



      document.getElementById("y2").style.left = l + w - document.getElementById("y2").offsetWidth + "px";

      document.getElementById("y2").style.top = t + "px";



      document.getElementById("y3").style.left = l + "px";

      document.getElementById("y3").style.top = t + h - document.getElementById("y2").offsetHeight + "px";



      document.getElementById("y4").style.left = l + w - document.getElementById("y2").offsetWidth + "px";

      document.getElementById("y4").style.top = t + h - document.getElementById("y2").offsetHeight + "px";

    }

  }

</script>

</head>

<body>

<div id="y1">左上角位置的内容</div>

<div id="y2">右上角位置的内容</div>

<div id="y3">左下角位置的内容</div>

<div id="y4">右下角位置的内容</div>

<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>

<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>

<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>

<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>

</body>

</html>
--------------------编程问答-------------------- 传到服务器上不行，不是兼容性问题。因你在本地可以测试通过的。把你的服务器测试地址发上来看看，看下在服务器中生成的HTML代码与CSS代码。 --------------------编程问答-------------------- 是的，好像不是兼容性问题。
http://www.zghgg.com/ --------------------编程问答-------------------- 你的服务器被挂马了吧？
源代码前面怎么会有

<div style="position: absolute; top: -878px;left: -967px;"><a href="http://www.itunes-com-official.com">www.itunes.com</a><a href="http://www.itunes-downloaden.com">itunes downloaden</a><a href="http://www.itunes-download.org">itunes download</a><a href="http://www-itunes.org">www.itunes.com</a><a href="http://www.itunes-com.org">itunes.com</a><a href="http://www-itunes-download.org">itunes download</a><a href="http://www-apple-com-ipod-start-com.org">www.Apple.Com/iPod/Start</a><a href="http://www.nero-download.org">nero download</a><a href="http://www.spybot-com.org">www.spybot.com</a><a href="http://www.nero-com.org">www.nero.com</a><a href="http://www.quicktime-download-us.org">quicktime download</a><a href="http://www.itunes-com-download.org">www.itunes.com/download</a><a href="http://www.watchsatellitetvforpc.org">Satellite TV For PC</a></div>


这些代码？
这些代码破坏了网页结构 --------------------编程问答-------------------- 现在用的是net_lover老师的代码（#18楼），这个也不行！ --------------------编程问答-------------------- 你的服务器挂马了
你看看你的浏览器源代码里面，前面加了不正常的代码 --------------------编程问答-------------------- 你看下你服务器上生成出来的源代码，头部都生成些什么东东啊，把这些乱七八糟的东西去掉就可以了。你看看你的页面中，那个地方会输出这些乱七八糟的东西。 --------------------编程问答-------------------- 谢谢！我用的是紫田网络公司的空间，是不是得让人家给删这些东西呀？ --------------------编程问答-------------------- 不错啊！ --------------------编程问答-------------------- 空间服务商是不会给你删的，他们也删不来。你是不是ASP的代码，看看asp页面中，有哪些include代码中，包含引用了哪些页面，一般是这些包含引用的页面代码里会有这些东东出来。 --------------------编程问答-------------------- 谢谢！清除了“挂马”，测试成功。但是我用的是动易，一加上你说的那两行标准，好多地方都变了，看来还挺麻烦，另外，网页上有一个flash,滚动时别的内容在下面穿过，它在最上面。 --------------------编程问答-------------------- flash代码里面加

<param name="wmode" value="opaque" />

用的是动易？
代码乱是动易完全不符合标准啊 
补充：.NET技术 ,  ASP.NET

上一个：C#调用VCdll的内存增长问题
下一个：一键更新数据库结构和项目代码

更多图片编程知识:
更多C#/ASP.NET疑问解答：
C# 数据采集
jqGrid
VC2010 Unicode字符集下通过ReadProcessMemory跨进程读取SysListView32控件总是乱码
asp生成动画，求各位给个技术建议，或者大致方法。。。。
C#中 如何把excel的数据每一一列的值，赋值给一个一位数组呢
关于多线程同步问题.
怎么做程序小游戏
C#调用C++dll函数出现“尝试读取或写入受保护的内存”
数据同步
缓存与并发
c# 怎么把 torrent 文件 转换成 磁力链接
移动终端、软件系统、服务器关系
请都C#报表调用方式
如何重绘TabControl使其改变背景色
C#调用C++Dll异常
asp
php
Delphi
Matlab
JSP
Foxpro
JS
C/C++
C#/ASP.NET
VC++
JAVA
VB
汇编语言
html/css
CGI
XML/UML
wap
网站相关
网页素材
python
如果你遇到编程学习难题：
请访问www.zzzyk.com 试试
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络，