Как сделать заголовок и боковую панель исправленной?

Question

Я следую MVC подход, где вы можете сохранить какое-то содержание static .i.e. заголовок, нижний колонтитул, боковую панель и т. д., используя layout. На мой взгляд, я хочу, чтобы заголовок и боковая панель фиксировались, пока пользователь scroll-down. Любая помощь ?

Answer 1

Используйте position : fixed для вашего заголовка div и sidebar 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; 
}