Heluyao's Blog » position http://11gz.com/blog 设计、开发路上的点点滴滴... Fri, 05 Aug 2011 07:24:40 +0000 en hourly 1 http://wordpress.org/?v=3.1 关于高度自适应的应用 http://11gz.com/blog/2009/01/03/height-adaptive/ http://11gz.com/blog/2009/01/03/height-adaptive/#comments Sat, 03 Jan 2009 08:29:19 +0000 heluyao http://www.11gz.com/blog/?p=346 　　某些时候可能需要用到“高度的自适应”。今天又空，就专门去研究了一下，其实原理很简单。

　　利用position绝对定位容器，设置其高度的百分比，但要注意同时初始化<html><body>的高度值(一般100%)，如以下代码。

html {height:100%; max-height:100%;}
body {height:100%; max-height:100%; overflow: hidden;}

一个简单的示例，可以下载文档查看。

下载: code.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. * { padding:0; margin:0;}
  8. html {height:100%; max-height:100%;}
  9. body {height:100%; max-height:100%; overflow: hidden;}
  10. .box { position:absolute; top:30px; bottom:15px; overflow:auto; background:#ccc; width:200px;}
  11. .inner { height:1000px;}
  12. </style>
  13. </head>
  14. <body>
  15. <div class="box">
  16.     <div class="inner"></div>
  17. </div>
  18. </body>
  19. </html>

　　在具体的实例应用中，肯定是要牵涉到多个容器，那么就可能需要用到z-index来区分开层级显示。下面是我今天弄出来的一个具体的页面。时间仓促，尚有不足之处，见谅！如果你又兴趣，大可以“另存为”而进行研究。将来肯定是有一番用武之处的。

具体示例：一个高宽自适应100%，所有容器均用?%设置大小

]]> http://11gz.com/blog/2009/01/03/height-adaptive/feed/ 1 ie6玩转position:fixed(实现固定定位) http://11gz.com/blog/2008/07/04/ie6-position-fixed/ http://11gz.com/blog/2008/07/04/ie6-position-fixed/#comments Fri, 04 Jul 2008 08:37:44 +0000 heluyao http://11gz-blog.528u.com/blog/?p=153 　　原理：出去网页以及原有的滚动条，用一个[div]模拟它。然后将要固定定位的区块置于这个模拟层之外，即可实现需要的效果。因为这时滚动条拖动的只是模拟的那个层，而固定定位的这个层根本就不在这个区块内，所以就不会跟随滚动条而动。

　　利用CSS控制行的属性：

下载: code1.html
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <style type="text/css"> 
  3. html,body { margin:0; padding:0; overflow:hidden;height:100%; width:100%; text-align:left;}
  4. .body { position:relative; width:100%; height:100%; overflow-y:scroll; overflow-x:auto; cursor:default;}
  5. .box {  position:absolute; z-index:999; margin:0 auto; bottom:10px; left:40px; width:800px; height:40px; border:1px solid #369; background:#f7f7f7; line-height:40px;}
  6. </style> 
  7. <div class="box">我是不会被你拖着走的！</div> 
  8. <div class="body"> 
  9.  <p style="margin:15px;">看屏幕底端的区块，再拖动浏览器的滚动条，结果怎么样？满意吧，惊喜吧！</p> 
  10.  <div style="height:1000px;"></div> 
  11. </div>

　　如果不明白，就自己再多想想吧！

　　还有种方法就是利用js来实现了。在此也顺便贴出来吧！

下载: code2.html
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. .floatBar { width:100%; position:fixed; bottom:0!important;height:31px; background:#f7f7f7; border:1px solid #369;}
  3. .floatBar {
  4. _position:absolute;
  5. _top:expression(eval(document.compatMode &&
  6.         document.compatMode=='CSS1Compat') ?
  7.         documentElement.scrollTop
  8.         +(documentElement.clientHeight-this.clientHeight) - 100
  9.         : document.body.scrollTop
  10.         +(document.body.clientHeight-this.clientHeight) - 100);
  11. }
  12.  
  13. <div style="height:800px;">下面的层是不随滚动条而动的。</div>
  14. <div class="floatBar">
  15. 这个是利用js实现的固定定位。
  16. </div>

　　两个方法都不错哦！值得推荐的！

]]> http://11gz.com/blog/2008/07/04/ie6-position-fixed/feed/ 1