位置：固定 - 內容消失縮放

瀏覽了教程http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/並試圖製作一個固定的頂部欄（就像Facebook，Twitter，techCrunch和其他任何熱門網站一樣），但是欄放大失敗。位置：固定 - 內容消失縮放

下面是我的意思的示例 - 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>

來源

2011-11-05 Vivek Chandra

試圖與UL替換div的（用於集裝箱）和李對內容，力似乎工作。即使在縮放後，教程中的底部欄仍保持良好狀態。 –

不僅縮放，而且縮小瀏覽器窗口的大小也會隱藏它們。 –

是的，它希望找到一個工作或知道我要去哪裏錯了.. –

這個問題蝸居後，終於找到了解決方案 - 感謝StackOverflow的社區!!這裏的鏈接（已發佈，因爲這疑問句力獲得任何輸出另一個問題）

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

來源

2011-11-06 18:29:40

您的容器寬度的100％和您的元件容器20採取+ 20 + 40 + 10 + 10 = 100％也。現在，如果縮放，則不會有任何可用空間展開，因此您需要指定這些元素的寬度。

編輯：「但教程內容保持」它是身體元素的背景圖像。

來源

2011-11-05 12:49:26 anon12356163

試過它具有特定的寬度也dint似乎得到的內容回到屏幕上 –

問題是任何固定的寬度（即使是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; 
}

來源

2011-11-05 12:57:02 ScottS

我遇到的問題是不適合屏幕上的內容 - 這只是我寫作的一個小代碼，用於解釋問題 - 我需要容器中的塊在縮放時保留在屏幕上 - 如第一篇教程中所示（放大和縮小試着看看我的意思）.. –

沒錯。如果你看看頁腳，整個容器都是按百分比來定義的，如果你縮小窗口並縮放，它也會碰到右邊，如果你足夠窄，我也可以讓它離開屏幕。任何固定寬度的項目都會在某些時候導致內容脫離屏幕，因爲縮放會通過某個縮放因子增加固定寬度。 – ScottS

只有腳踏板的寬度爲94％，其餘的腳釘（在腳踏板中）的寬度爲16px（家裏50px，聊天126px）。我同意在某些時候任何固定將離開屏幕，但教程內容保持 - 我的意思是 - 你得到一個滾動，但在我的代碼中滾動本身並不是預設的，即使它不會顯示頂部欄的內容.. !! .. –

您可以使用JavaScript來修復它，和最佳實踐，您可以使用一個div絕對位置和容器內的div來放置內容到包裝容器。

JavaScript的

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

來源

2012-05-26 20:45:43 Zac

位置：固定 - 內容消失縮放

回答

相關問題