现在我的屏幕代码看起来很完美，但出于某种原因，每次我将浏览器大小从全屏更改为较小的窗口时，我的所有导航栏都会在标题 div 和其他内容下彼此移动。如果我要在页脚中添加内容，我该如何设置它，以便无论您如何调整页面大小，页面都保持不变。我不介意它是否固定为全屏模式。
另一个问题是，当我让一位 friend 在他的笔记本电脑上查看网站时，我认为是因为屏幕分辨率的原因，网站全乱了，但是当我在我的显示器上看到它时，它看起来完全没问题。所以我很困惑，不知道如何解决这个问题。我已尽我所能进行研究，但我尝试的一切都没有奏效。
所以我要做的就是确保网站是固定的并且只能全屏查看。如果我将其调整为更小，那么您将看不到页面的某些部分，仅此而已。
如果你能帮助我，那就太好了!
http://jsfiddle.net/thNRs/ -------------->JSFIDDLE 演示。您可以使用它立即看到问题。
HTML 代码:
<body>
<div id="page">
<div id="header">
<a href="http://wireless.fm.intel.com/test/index.php"><img src="http://wireless.fm.intel.com/test/logo2.png" border=0></a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
<div id="navigation">
<a href="#">About</a>
<a href="#">Reports</a>
<a href="#">Documents</a>
<a href="#">Checklists</a>
<a href="#">License Tools</a>
<a href="#">Presentations</a>
<a href="#">Software Releases</a>
</div>
</div>
<div id="main"></div>
<div id="footer">
<!--<h4>WNG Product Development Engineering (US)</h4>
<a href="https://employeeportal.intel.com/irj/portal">Circuit</a>
<a href="#">Contact Us</a>-->
</div>
</div>
</body>
CSS 代码:
html, body
{
padding:0;
margin:0;
height:100%;
}
#page
{
min-height:100%;
position:relative;
height:100%;
}
#header
{
background-color:#115EA2;
height:100px;
width:97.5;
position:relative;
}
#main
{
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:90%;
height:auto;
height:89%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer
{
position:fixed;
width:100%;
bottom:0;
height:35px;
background-color: #115EA2;
}
#header img
{
float:left;
display:inline;
}
#header h2
{
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
font-family: Sans-serif;
float:left;
margin-top:20px;
margin-left:20px;
text-decoration:none;
}
#header h2, a, a:visited, a:hover, a:active
{
color: #FFFFFF;
text-decoration: none;
}
/*#footer h4
{
left:20px;
top:-10px;
position:relative;
text-align:left;
font-weight:bold;
font-family: Sans-serif;
float:left;
color:#fff;
margin-left:20px;
}
#footer a, a:visited, a:hover, a:active
{
color::#fff;
text-decoration:none;
position:relative;
left:1025px;
top:10px;
text-align:left;
font-weight:bold;
font-family:Sans-serif;
float:left;
margin-left:20px;
}*/
/* NAVIGATION BAR CODE */
#navigation
{
position:absolute;
top:60;
left:500;
right:0;
bottom:0;
width:60%;
height:24px;
background-color:#115EA2;
min-width:100px;
text-align:center;
padding:10px 20px;
}
#navigation a
{
font-size:20px;
font-weight:bold;
font-style:Sans-serif;
margin:10px 0;
height:18px;
padding:12px 10px;
color:#FFF;
text-decoration:none;
}
#navigation a:hover
{
background-color:#333;
}
最佳答案
当窗口调整大小时或当有人使用 ctrl + 鼠标滚轮向上/向下类型的页面缩放时，页面移动问题的一个很好的解决方案是使用 em 单位设置页面上的东西的大小。例如:
height:12.5em;
不是...
height:200px;
width:60%;
等...
默认 1em == 16px。如果您将字体大小更改为新的 em，我认为它可能会把事情搞砸，所以只要您不这样做就没事。
将所有容器除了最外面的容器设置为确定的大小，并使用 em 单位，因为它们是根据字体大小或其他因素计算的，因此当您缩放页面时，所有内容都保持相同的相对大小并且你不会弄得一团糟。当我说最外层的容器时，我指的是直接在主要标签、正文、标题等内部的容器……将它们设置为:
margin:auto;
width:(desired)%;
因为它们在外面，所以它们只根据显示区域的边缘发生变化，所以当你放大和缩小时，页面的外边缘缓冲区只是折叠起来，而中心的东西看起来会缩小和放大从中心。
所以拿个计算器，开始转换 width:1300px;到宽度:81.25em。
最后一点。 em 单位四舍五入到小数点后三位。 IE。 2px = .125em 正好但是 1px =/= .0625em 你会使用 .063em。
关于html - 当从桌面屏幕上的全屏模式更改时，网站中的所有内容都会移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17624460/