div位置有关问题-HTML教程-爱易网页

div位置有关问题

日期：2014-05-17　浏览次数：20665 次

div位置问题
<body>中有几个div，如何设置这些div的位置，使其随浏览器窗口大小的改变而改变。比如一直保持某个div在窗口的中间位置

------解决方案--------------------

HTML code

<style type="text/css">
#demo { width:150px; border:1px solid #CCC; margin:0 auto; }
</style>
<div id="demo">DEMO</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">
<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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

div位置有关问题

相关资料更多>

推荐阅读更多>