用CSS創建邊欄，同時也有頂欄

我想用CSS創建邊欄，同時在同一個窗口中也有一個頂欄。我在我的html文件中有一個<div id="topbar">和一個<div id="sidebar_left">。在頂欄中有打開，保存和加載的圖標等。在側邊欄中有一個文件列表。如果列表長度大於窗口的高度，則應該只能滾動側邊欄，而不能滾動整個頁面。用CSS創建邊欄，同時也有頂欄

我的CSS：

#topbar{ 
    height: 40px; 
    background: #ddd; 
    border-bottom: 1px #aaa solid; 
    width: 100%; 
} 
#topbar img{ 
    height: 32px; 
    width: 32px; 
} 

#sidebar_left{ 
    overflow-y: scroll; 
    min-width: 150px; 
    position: fixed; 
    height: 100%; 
    float: left; 
    background: #f0f0f0; 
    border-right: 1px #aaa solid; 

    padding-right: 20px; 
} 
#sidebar_left h1{ 
    font-size: 1em; 
} 
#sidebar_left ul{ 
    list-style: square; 
} 
#sidebar_left a{ 
    color: #555; 
    text-decoration: none; 
} 
#sidebar_left li{ 

} 
#sidebar_left ul li img{ 
    height: 16px; 
    width: 16px; 
    margin-right: 6px; 
}

我的問題是，側邊欄是由頂欄的高度向下推，因此是不可見的完全（它在底部被裁剪）。如果我從我的html文件中刪除topbar-div，則側欄完全可見。我想我可以通過設置邊欄的高度（窗口高度） - （頂欄的高度）來解決這個問題。有沒有一種方法可以在沒有JavaScript的情況下做到這一點？

來源

2016-08-02 Alexander

你可以添加一個小提琴？ –

如果你想要一個合適的解決方案，你將不得不隱藏HTML。你只使用div，標題標籤，...？ – Wolfgang

@Wolfgang這裏是小提琴：https://jsfiddle.net/5cuxngw1/ – Alexander

您可以使用css calc函數。只需將height: calc(100% - 80px);添加到側邊欄，然後將減法更改爲任何頂杆的高度即可。

這裏是W3Schools的頁面吧：http://www.w3schools.com/cssref/func_calc.asp

來源

2016-08-02 22:26:15 Taylor

設置#topbarposition:fixed或position:absolute，給欄頂部#topbar的身高所抵消。

在#topbarposition:absolute情況下，記得要加position:relative到#topbar的父。

來源

2016-08-02 22:22:48

試試這個：

#topbar { 
    height: 40px; 
    background: #ddd; 
    border-bottom: 1px #aaa solid; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#sidebar_left { 
    overflow-y: scroll; 
    min-width: 150px; 
    position: fixed; 
    height: 100%; 
    background: #f0f0f0; 
    border-right: 1px #aaa solid; 
    top: 41px; 
    left: 0px; 
    padding-right: 20px; 
}

來源

2016-08-02 22:31:00

用CSS創建邊欄，同時也有頂欄

回答

相關問題