Home > Web Front-end > HTML Tutorial > Once the resolution changes, the position of the fixed DIV here will change. How did you solve it? ? _html/css_WEB-ITnose

Once the resolution changes, the position of the fixed DIV here will change. How did you solve it? ? _html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:16:35
Original
1400 people have browsed it

Here is the code. I have two fixed DIVs here that I don’t want their positions to change when I change the resolution. Can anyone please help me modify the code?

<!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=GBK" /><meta http-equiv="Content-Language" content="zh-CN" /><meta http-equiv="Author" content="自然" /><meta http-equiv="Index" content="http://blog.csdn.net/xxd851116" /><title>资料</title><style type="text/css">  /*<![CDATA[*/ body {margin:0; padding:0; height:100%; overflow:auto;}/* 全局浮动层固定默认样式设置,支持FF和IE */.fixed {position:fixed;}* html div.fixed {position:absolute; right:16px;} /* [only for ie] "right=16px"是为了显示滚动条,即right最小值为16px */html {overflow:auto !important; overflow:hidden;}#menu1 {width:100%; padding:10px; text-align:center; font-weight:bold; background:#000; color:#FFF; top:0;}#menu2 {width:1180px; padding:10px; text-align:center; font-weight:bold; top:30px; left:41px}/* 修改左边距离left***px */#menu1 a {color:#FFF;}.STYLE1  {color: #000000; font-size: 9pt; width: 80px;overflow:hidden;text-overflow:ellipsis;/*文字溢出的部分隐藏并用省略号代替*/white-space:nowrap;/*文本不自动换行*/}.STYLE4 {font-size: 12px; color: #000000; width: 80px;}.STYLE8 {font-size: 12px; color: #000000; }.STYLE6 {font-size: 12px; color: #CCFF66; width: 80px; }</style></head><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><div id="menu1"  class="fixed"> <table width="665" align="center" cellpadding="1" cellspacing="1">    <tr>      <td width="66" height="19"><center class="STYLE8">        <a href="#" target="_parent">FFS</a>      </center>      </td>      <td width="138" height="19">        <center class="STYLE8">          <a href="#" target="_parent">SSS</a>      </center>      </td>      <td width="147" height="19"><center class="STYLE8">          <a href="#" target="_parent">GGG</a>      </center>      </td>      <td width="163"><div align="center" class="STYLE8"><a href="#" target="_parent">CCC</a>      </div>        <center class="STYLE8">      </center>      </td>      <td width="133">      <div align="center" class="STYLE8"><a href="#" target="_parent">NNN</a></div></td>    </tr>  </table></div><center>  <p> </p>  <p> </p>  <div id="menu2"  class="fixed">    <table width="1115" align="center" cellpadding="1" cellspacing="1">      <tr>        <td height="19" colspan="8"><center>          <table align="center" cellpadding="1" cellspacing="1" bordercolor="#000000" bgcolor="#FFFFFF" width="918" >            <tr height="23">              <td width="80" height="66" bgcolor="#333333"><div align="center" class="STYLE6">AAA</div></td>              <td width="80" height="66" bgcolor="#333333"><div align="center" class="STYLE6"> BBB </div></td>              <td width="80" bgcolor="#333333"><div align="center" class="STYLE6"> CCC </div></td>              <td width="80" bgcolor="#333333"><div align="center" class="STYLE6"> DDD </div></td>              <td width="80" bgcolor="#333333"><div align="center" class="STYLE6"> EEE </div></td>              <td width="80" bgcolor="#333333"><div align="center" class="STYLE6"> FFF </div></td>              <td width="80" bgcolor="#333333"><div align="center" class="STYLE6"> GGG </div></td>              <td width="80" bgcolor="#333333"><div align="center" class="STYLE6"> SSS </div></td>              <td width="80" bgcolor="#333333"><div align="center" class="STYLE6"> VVV </div></td>              <td width="80" bgcolor="#333333"><div align="center" class="STYLE6"> XXX </div></td>              <td width="82" bgcolor="#333333"><div align="center" class="STYLE6"> BBB </div></td>            </tr>          </table>        </center></td>      </tr>    </table>  </div>  <p> </p>  <p> </p><body bgcolor="#C1DAD7"> <table width="918" align="center" cellpadding="1" cellspacing="1" bordercolor="#000000" bgcolor="#FFFFFF" >    <tr height="23" width="1334"><td width="80" height="34" bgcolor="#CCCCCC"><div align="center" class="STYLE4"><a href="#"><font color="##FF0000">修改</font></a>      </div></td>      <td width="80" height="34" bgcolor="#CCCCCC"><div align="center" class="STYLE1">          a      </div></td>      <td width="80" bgcolor="#CCCCCC"><div align="center" class="STYLE1">          b      </div></td>      <td width="80" bgcolor="#CCCCCC"><div align="center" class="STYLE1">          c      </div></td>      <td width="80" bgcolor="#CCCCCC"><div align="center" class="STYLE1">          d      </div></td>      <td width="80" bgcolor="#CCCCCC"><div align="center" class="STYLE1">      e</div></td>      <td width="80" bgcolor="#CCCCCC"><div align="center" class="STYLE1">          f      </div></td>      <td width="80" bgcolor="#CCCCCC"><div align="center" class="STYLE1">          g      </div></td>      <td width="80" bgcolor="#CCCCCC"><div align="center" class="STYLE1">          h      </div></td>      <td width="80" bgcolor="#CCCCCC"><div align="center" class="STYLE1">          i      </div></td>      <td width="82" bgcolor="#CCCCCC"><div align="center" class="STYLE1">          j      </div></td>  </tr> <%rs.movenextloop%></table></center> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p></body></html>
Copy after login


Reply to discussion (solution)

It is normal for the two fixed DIVs of this webpage to work at a resolution of 1280*800.

Dynamically obtain and dynamically set width and height

position:fixed; this is a fixed position, the resolution changes, or the browser zooms in and out the position will definitely change, you set it to adaptive Take a look, I usually use adaptive browsers: position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; for positioning. Of course, the values ​​​​of top, left, right, bottom, you You can set it yourself.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template