现在我的屏幕代码看起来很完美，但由于某种原因，每次我将浏览器大小从全屏更改为较小的窗口时，我的所有导航栏都会在标题 div 和其他内容下相互移动。如果我还要在页脚中添加内容，我该如何设置它以使页面保持不变，无论您如何调整它的大小。我不介意它是否只固定在全屏模式上。
另一个问题是，当我让朋友在他的笔记本电脑上查看网站时，我认为由于屏幕分辨率的原因，一切都搞砸了，但是当我在显示器上看到它时，它看起来完全没问题。所以我很困惑，不知道如何解决这个问题。我已经尽可能多地进行了研究，但我尝试的一切都没有奏效。
所以我要做的就是确保网站是固定的并且只能全屏查看。如果我将其调整为更小，那么您将看不到页面的某些部分，仅此而已。
如果你能帮助我，那就太好了！
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>
代码：
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;
}