如何修改標題和邊欄？

Question

我跟隨MVC的方法，你可以保留一些內容static.i.e。頁眉，頁腳，邊欄等使用layout。在我看來，我想讓頁眉和邊欄固定，而用戶scroll-down頁面。任何幫助？

Answer 1

使用position : fixed爲您的標題div和側欄div。

Answer 2

你完全可以清理邊欄和固定位置，但this demo似乎工作（僅快速模型）。您需要將CSS添加到樣式表中，然後爲標題，側邊欄和主要內容窗口創建部分。

在CSS（如下）中，您需要調整一些屬性以確保在設置設計時所有內容都能正確對齊。

* { box-sizing: border-box; } 

.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding:10px; 
    background-color: #eee; 
    border-bottom: 1px solid #ddd; 
} 

.container { padding-top: 32px; } /* Adjust this value based on height of .header */ 

.main { 
    width: 70%; 
    margin-left: 30%; 
    padding-left: 20px; 
} 

.sidebar { 
    position: fixed; 
    top: 41px; /* Adjust this value based on height of .header and any additional padding */ 
    bottom: 0; 
    width: 30%; 
    overflow-y: scroll; 
}