位置：固定在左推送內容

所以我要在我的網站，它工作正常左側的導航欄，但它不會「推」像普通數據的腳註確實位置：固定在左推送內容

#navbar { 
    float:left; 
    width: 181px; 
    position: fixed; 
    height: 100%; 
} 
#footer { 
    border-top:2px solid #a1a1a1; 
    position:absolute; 
    bottom:0; 
    width:100%; 
    color:white; 
    height:60px; /* Height of the footer */ 
    background-color: #101010; 
}

這是CSS，你可以看到一個「工作」的版本：

version - no data

version - with data

與第二個鏈接，你會發現的主要內容是如何將這些數據推，b UT放在了第一位，如果你有一個小屏幕或使窗口小，它不會顯示所有的導航欄的，是有辦法解決這一問題？我相信我已經涵蓋了一切

來源

2014-01-30 Tom Hancock

如果我正確理解您的問題，當頁面垂直調整大小時，您希望頁腳在到達navbar時停止。

一個可能的解決方案是修改.navbar CSS象下面這樣：

#navbar { 

    // remove these styles 
    // float: left; 
    // position: fixed; 
    // height: 100%; 

    width: 181px; // keep this 
}

爲了得到頁腳在導航欄的底部休息，你需要讓.navbar迴文檔流程，float:和position: fixed將其從文檔流中取出。

您仍可能希望將此float:left作爲您的設計的一部分，在這種情況下，您需要使用其他方法向下延伸以停止頁腳（可能是content部分中的內容）。

來源

2014-01-30 04:14:35 badAdviceGuy

我可以很容易地刪除這些，但我也仍然希望導航欄保持其位置，以便在長頁面上它停留在屏幕上，而不是去到文本的中心 –

@TomHancock我不認爲你可以實現你想用純html和css。你將不得不涉及的JavaScript，因此您可以檢查時，側邊欄的底部已達到頁腳。有一個稱爲[置頂側欄（一堆這樣https://www.google.se/search?q=sticky+sidebar&oq=sticky+sidebar&aqs=chrome.0.69i59j69i65j69i60l2j0l2.2186j0j4&sourceid=chrome&espv=210&es_sm=119&ie=UTF-8 ）插件那裏。 –

位置：固定在左推送內容

回答

相關問題