Как создать фиксированный заголовок, нижний колонтитул и макет боковой панели с прокручиваемым содержанием в электроне? ⇐ CSS

[Anonymous]

Я работаю над применением электронов с определенным требованием макета и сталкиваю проблемы с нежелательными полосами прокрутки. Мне нужен заголовок, нижний колонтитул и навигационная боковая панель, чтобы оставаться фиксированными в положении, причем только основная область контента прокручивается, когда его содержание превышает просмотр. Весь окно установлено на высоту 600px, и нет компонента за пределами основного контента не должно прокручивать. < /P>
Вот мой текущий CSS: < /p>

Код: Выделить всё

body {
margin: 0;
padding: 0;
display: grid;
grid-template-areas:
"header header"
"nav content"
"footer footer";
grid-template-rows: 100px 1fr 20px; /* Header height, content taking the rest, footer height */
grid-template-columns: 150px 1fr; /* Navigation width, content taking the rest */
min-height: 100vh;
font-family: Arial, sans-serif;
}

#header {
grid-area: header;
background: #f0f0f0;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
position: fixed;
top: 0;
width: 100%;
height: 100px;
}

#nav {
grid-area: nav;
background: #f0f0f0; /* Different color to distinguish nav area */
top:60px;
bottom:30px;
width: 150px;
position:absolute;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
left:0;
position: fixed;
}

#content {
grid-area: content;
background: #f0f0f0;
padding: 20px; /* Padding for content for better readability */
overflow-y: auto; /* Enables scrolling if the content is taller than the screen */
}

#footer {
grid-area: footer;
background: #f0f0f0; /* Matching the header */
padding: 10px; /* Consistent padding with the header */
width: 100%;
position: fixed;
bottom: 0;
height: 30px;
}

и мой index.html :




MySoftware Client








MySoftware


✕

• Setup
  Help

MySoftware v1.0.0



< /code>
Однако для всего окна появляется прокрутка. Я хочу, чтобы только область контента имела прокрутку при необходимости, не влияя на общее окно. Окружающая среда?>

Подробнее здесь: https://stackoverflow.com/questions/794 ... le-content