分辨率一变,这里的固定DIV怎么弄位置都在变化。各位是如何解决的??_html/css_WEB-ITnose
这下面是代码,我这里有两个固定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><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>
回复讨论(解决方案)
这个网页的两个固定DIV在1280*800的分辨率下工作是正常的。
动态获取 动态设置 宽高
position:fixed;你这是固定定位,分辨率变了,或者是浏览器放大缩小位置肯定会变的,你设置成自适应的看看,我一般自适应的浏览器都是用:position:absolute;top:0px;left:0px;right:0px;bottom:0px;定位的,当然top,left,right,bottom的值,你可以自己设置。

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
