position:fixed -- 内容在 Zoom 上消失答案

【问题标题】：position:fixed -- content disappearing on Zoomposition:fixed -- 内容在 Zoom 上消失
【发布时间】：2011-11-05 11:41:18
【问题描述】：

通过教程http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/ 并尝试制作固定顶部栏（就像 Facebook、twitter、techCrunch 和任何其他流行的网站一样），但该栏在 ZOOM 上失败。

这是我的意思的一个例子——http://rtabl.es/designingforstartups——如果你放大那个链接，你可以看到右边的内容从屏幕上消失了。同样的事情发生在我身上，我不希望内容在缩放时消失..

这是测试代码，按照教程，给容器一个position:fixed，内容有position:relative和float:left——想知道我哪里出错了。

代码——

        <html>
    <style type="text/css">
    #Contianer{
    position: fixed;
    height: 35px;
    width: 100%;
    z-index: 9999;
    color: white;   
    background-color: #474747;
    }
    .x{
    float: left;
    text-align: center; 
    position: relative;
    line-height: 35px;
    border:1px solid white;
    }
    #a{
    width:20%;
    text-align: left;
    min-width: 100px;
    }
    #b{
    width:20%;
    min-width: 100px;
    text-align: left;
    height: 35px;
    display: table-cell;
    } 
    #c{
    min-width: 200px;
    width:40%;
    }
    #d,#e{
    min-width: 50px;
    width:10%;
        }
    body{
    border:0;
    margin: 0;
    }

    </style>
    <body>
    <div class="Contianer" id="Contianer">
    <div id="a"  class="x">
        foo
    </div>
    <div id="b" class="x">
        bar
    </div>
    <div id="c" class="x">
        tom 
    </div>
    <div id="d" class="x">
        jerry
    </div>          
    <div id="e" class="x">          
        Out
    </div>
    </div>

    </body>

【问题讨论】：

尝试将 div 替换为 ul（用于容器）和 li 用于内容，dint 似乎有效。即使在缩放之后，教程中的底部栏也保持正常..
不仅缩放，而且缩小浏览器窗口的大小也会隐藏它们。
是的，希望能找到解决办法或知道我哪里出错了..

标签： css css-position

【解决方案1】：

在纠结了这个问题之后，终于找到了解决方案——感谢stackoverflow社区！！..这是链接（发布了另一个问题，因为这个问题获得了任何输出）

unable to get the scroll when position:fixed -- elements disappears form the screen

【讨论】：

【解决方案2】：

您可以使用 Javascript 来修复它，为了获得最佳实践，您可以使用 div 以绝对位置包装容器，并在容器内使用 div 来放入内容。

Javascript

$(windows).resize(function(){
        if ($(window).width() < $('.content').width()){
            $('.container').css('position', 'static');
        }
        else{
            $('.container').css('position', 'fixed');
        }
    });

【讨论】：

【解决方案3】：

问题在于任何固定宽度（甚至是min-widths）。一切都必须以百分比（灵活）或至少占一些较小的固定宽度。所以在你的例子中，如果我缩小某些项目的百分比以允许 1px 边框，并且我消除了最小宽度，我不会遇到问题（但是，在小屏幕上它会降低浮动） .这是您修改后的代码：

#Contianer{
position: fixed;
min-height: 35px;
width: 100%;
z-index: 9999;
color: white;   
background-color: #474747;
}
.x{
float: left;
text-align: center; 
position: relative;
line-height: 35px;
border:1px solid white;
}
#a{
width:19%; /*downsized to give room for fixed width borders*/
text-align: left;

}
#b{
width:19%; /*downsized to give room for fixed width borders*/

text-align: left;
height: 35px;
display: table-cell;
} 
#c{

width:40%;
}
#d,#e{
min-width: 50px;
width:10%;
    }
body{
border:0;
margin: 0;
}

【讨论】：

我遇到的问题是不适合屏幕中的内容——这只是我写的一个小代码，作为解释问题的要点——我是容器中的整个块在屏幕上缩放 - 如第一个教程中所示（放大并尝试了解我的意思）..
没错。如果你看页脚，整个容器是由百分比定义的，如果你缩小窗口并缩放，它也会在右侧向下颠簸，如果你缩小得足够，我也可以让它离开屏幕。任何固定宽度的项目都会在某些时候导致内容离开屏幕，因为缩放会将固定宽度增加一些缩放因子。
只有脚部面板的宽度为 94%，其余的锚（在脚部面板中）的宽度为 16 像素 - 特定宽度（家庭 50 像素和聊天 126 像素）。我同意在某些时候任何固定将离开屏幕，但教程内容仍然存在——我的意思是——你得到一个滚动条，但在我的代码中滚动条本身不是预设的，即使它不会显示顶部栏的内容..!!..
正确。任何fixed 元素一旦离开屏幕，就无法通过滚动（甚至教程）访问。它们的按钮非常窄，以至于您必须非常窄才能使其成为问题。在你的情况下，你的元素基本上占了 100%，所以正如 anon12356163 在他的回答中评论的那样，如果你没有空间为你的 fixed 定位容器中的任何固定宽度元素“扩展”缩放。如果您的目标是始终保持在屏幕上，则您只需要对条“内部”元素的所有宽度使用百分比。然而……
...如果您的目标是让项目易于查看（可能通过向左滚动）但将它们固定在屏幕顶部，那么您可能会找到我以前的答案在stackoverflow.com/questions/3303173/… 有帮助。

【解决方案4】：

您的容器是宽度的 100%，您的元素容器也占用 20+20+40+10+10=100%。现在，如果您缩放，将没有任何可用空间可以展开，因此您需要指定这些元素的宽度。

编辑：“但教程内容仍然存在”它是 body 元素上的背景图像。

【讨论】：

也尝试了特定的宽度，dint 似乎将内容重新显示在屏幕上