Css 位置：固定--缩放时内容消失

浏览了教程，并尝试制作一个固定顶栏（就像Facebook、twitter、techCrunch和其他流行网站一样），但该栏在ZOOM上失败

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

下面是测试代码，按照教程，给容器一个

位置：fixed

，内容有

位置：relative

，带有

float:left

——不知道哪里出了问题

代码--

#康蒂纳{
位置：固定；
高度：35px；
宽度：100%；
z指数：9999；
颜色：白色；
背景色：#474747；
}
.x{
浮动：左；
文本对齐：居中；
位置：相对位置；
线高：35px；
边框：1px纯白；
}
#a{
宽度：20%；
文本对齐：左对齐；
最小宽度：100px；
}
#b{
宽度：20%；
最小宽度：100px；
文本对齐：左对齐；
高度：35px；
显示：表格单元格；
} 
#c{
最小宽度：200px；
宽度：40%；
}
#d、 #e{
最小宽度：50px；
宽度：10%；
}
身体{
边界：0；
保证金：0；
}
福
酒吧
汤姆
杰瑞
出来

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

---

编辑：“但教程内容保持不变”这是body元素上的背景图像。

问题在于任何固定宽度（甚至

最小宽度

）。所有内容都必须是百分比（灵活的），或者至少考虑一些较小的固定宽度。因此，在您的示例中，如果我缩小了某些项目的百分比，以允许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;
}

---

在仔细考虑了这个问题之后，终于找到了一个解决方案——感谢stackoverflow社区！！。。这是链接（由于此问题无法获得任何输出，因此发布了另一个问题）

---

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

Javascript

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

$（windows）.调整大小（函数（）{
如果（$（窗口）.width（）<$（'.content'）.width（））{
$（'.container'）.css（'position'，'static'）；
}
否则{
$（'.container'）.css（'position'，'fixed'）；
}
});

尝试用ul（容器）替换div，并用li替换内容物，力似乎起作用。即使在缩放后，教程中的底部栏仍保持良好状态。不仅缩放，而且缩小浏览器窗口的大小也会隐藏它们。是的，它会隐藏它们，希望找到解决方法或知道我的错误所在。还尝试了特定宽度，dint似乎将内容放回到屏幕上我遇到的问题是没有将内容放在屏幕上--这只是我写的一个小代码，作为解释问题的要点--我在容器中放置entaire块，以便在缩放时留在屏幕上--正如第一个教程中所示（放大并尝试查看我的意思）…准确地说。如果你看页脚，整个容器是由百分比定义的，如果你缩小窗口并缩放，它也会从右边往下撞，如果你足够窄，我也可以让它离开屏幕。任何固定宽度的项目都会在某个时候导致内容离开屏幕，因为缩放会将固定宽度增加一些缩放因子。只有脚部面板的宽度为94%，其余锚固件（在踏板中）的宽度为16px——特定宽度（home 50px和chat 126px）.我同意在某些时候，任何固定的内容都会离开屏幕，但教程内容保持不变--我的意思是--你会得到一个滚动条，但在我的代码中，滚动条本身不是预设的，即使它不会显示顶部栏的内容。。！！。。对的任何

fixed

元素一旦离开屏幕，就无法通过滚动（甚至教程）访问。它们的按钮太窄了，你必须走得非常窄才能把它变成一个问题。在你的例子中，元素基本上占了100%，正如一位12356163在他的回答中所说的，如果你在

fixed

定位的容器中没有空间“扩展”任何固定宽度元素的缩放。如果您的目标是始终保持在屏幕上，那么您只需要对“在”您的栏中的所有元素宽度使用百分比。但是……如果您的目标是保持项目可供查看（可能通过向左滚动），但将其固定在屏幕顶部，那么您可能会发现我之前的答案在下面很有帮助。

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