Question

浏览了教程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>

Answer 1

经过这个问题，终于找到了解决方案 - 感谢stackoverflow社区!!这里是链接（已经发布了另一个问题，因为这个问题得到了任何输出）

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

Answer 2

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

Javascript

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

Answer 3

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

编辑：“但教程内容保持”它是身体元素的背景图像。

Answer 4

问题是任何固定宽度（甚至是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;
}

position：fixed - 内容在Zoom上消失

4 个答案: