CSS 位置：固定 - 内容在缩放时消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8019934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
position:fixed -- content disappearing on Zoom
提问by Vivek Chandra
went through the tutorial http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/and tried the same to make a fixed top bar (just like Facebook,twitter,techCrunch and any other popular sites out there),but the bar fails on ZOOM.
通过教程http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/并尝试使用相同的方法制作固定的顶部栏（就像 Facebook、twitter、techCrunch 一样和任何其他流行的网站），但栏在 ZOOM 上失败。
Here's an example of what i mean -- http://rtabl.es/designingforstartups-- if you zoom in that link,you can see that the content on the right disappears from the screen . Same thing is happening with me,and i dont want the content to disappear on zoom..
这是我的意思的一个例子——http: //rtabl.es/designingforstartups——如果你放大那个链接，你可以看到右边的内容从屏幕上消失了。同样的事情发生在我身上，我不希望内容在缩放时消失..
Here's the test code,followed the tutorial and gave the container a position:fixedand the contents have position:relativewith a float:left-- wondering where i'm going wrong.
这是测试代码，按照教程并给容器一个position:fixed，内容有position:relative一个float:left- 想知道我哪里出错了。
Code --
代码 -
<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>
采纳答案by Vivek Chandra
After dwelling with this issue,finally found a solution -- thanks to stackoverflow community!!.. here's the link(had posted another question as this ques dint gain any output)
在解决了这个问题之后，终于找到了一个解决方案——感谢 stackoverflow 社区！！...这里是链接（已经发布了另一个问题，因为这个问题会获得任何输出）
unable to get the scroll when position:fixed -- elements disappears form the screen
回答by Zac
You can use Javascript to fix it, and for best practices you can use a div to wrap the container with an absolute position and a div inside the container to put content into.
您可以使用 Javascript 来修复它，对于最佳实践，您可以使用 div 将容器包裹在一个绝对位置，并在容器内使用一个 div 来放入内容。
The Javascript
Javascript
$(windows).resize(function(){
if ($(window).width() < $('.content').width()){
$('.container').css('position', 'static');
}
else{
$('.container').css('position', 'fixed');
}
});
回答by anon12356163
Your container is 100% of width and your element containers take 20+20+40+10+10=100% also. Now if you zoom, there won't be any free space to expand into, so you need to specify the width of these elements.
您的容器是 100% 的宽度，而您的元素容器也是 20+20+40+10+10=100%。现在，如果缩放，将没有任何可用空间可以扩展，因此您需要指定这些元素的宽度。
EDIT: "but the tutorial content stays" it is a background image on body element.
编辑：“但教程内容保留”它是 body 元素上的背景图像。
回答by ScottS
The problem is any fixed widths (even min-widths). Everything must be in a percentage (flexible) or at least account for some minor fixed widths. So in your example, if I down-size the percentages of some of the items to allow for the 1px borders, and I eliminate the min-width, I do not get the issue (however, on small screen it bumps the floats down). Here's your modified code:
问题是任何固定宽度（甚至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;
}
