Question

现在我的屏幕代码看起来很完美，但出于某种原因，每当我将浏览器大小从全屏改为较小的窗口时，我的所有导航栏都会在标题div和其他内容下相互移动。如果我要在页脚中添加内容以及如何设置它以使页面保持不变，无论您如何调整它。我不介意它是否仅固定在全屏模式下。

另一个问题是，当我让一位朋友检查他的笔记本电脑上的网站时，由于屏幕分辨率，我觉得这一切都搞砸了，但是当我在显示器上看到它时，它看起来完全没问题。所以我很困惑，不知道如何解决这个问题。我尽可能多地研究，但我尝试的一切都没有用。

所以我要做的就是确保网站是固定的，只能全屏查看。如果我将它调整为较小，那么你就看不到页面的部分内容了。

如果你能帮助我，那就太好了！

http://jsfiddle.net/thNRs/ ----------------＆gt; JSFIDDLE DEMO。您可以立即使用此功能查看问题。

HTML CODE：

<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;
}

Answer 1

当窗口调整大小或有人进行ctrl +鼠标滚轮向上/向下类型的页面缩放时页面移位问题的一个很好的解决方案是使用em单元设置页面上的东西大小。例如：

height:12.5em;

...不

height:200px;
width:60%;

等...

默认情况下，

1em == 16px。如果你将字体大小更改为新的字体，我认为它可以搞砸了，只要你不这么做就可以了。

将除了最外面的容器设置为一定的大小并使用em单位，因为它们是根据字体大小计算的，所以当你缩放页面时，一切都保持相同的相对大小和你不会混淆。当我说最外面的容器时，我指的是直接位于主标签，主体，标题等内部的容器......用以下内容设置：

margin:auto;
width:(desired)%;

因为它们在外面，它们只是参考显示区域的边缘而改变，所以当你放大和缩小时，页面的外边缘缓冲区就会崩溃，中心的东西看起来会缩小和放大来自中心。

所以得到一个计算器，并开始转换宽度：1300px;到宽度：81.25em。

最后一点。 em单位舍入到小数点后3位。即。 2px = .125em完全但1px = / = .0625em你会使用.063em。

Answer 2

Something to this effect?

最大的问题是你的菜单没有最小宽度，所以它会一直缩小，直到它自身堆叠。

 #navigation {
    float:left;
    width:60%;
    height:24px;
    min-width:1000px;
    text-align:center;
    padding:10px 20px;
}

Answer 3

为#navigation添加修复宽度。它现在具有百分比值，因此其宽度将从主体的宽度（60％）开始计算。如果＃导航的宽度比元素的宽度总和窄，则元素将开始落到第二行。

＃标题的宽度为“97.5”。没有测量类型（px，百分比或其他），浏览器将忽略它（它将是100％）。

在桌面屏幕上从全屏模式更改时，一切都在网站中移动

3 个答案: