这是一种奇怪的困境,因为我最终使用flexbox来对齐我的侧边栏和标题菜单项,并使用网格来显示/分配空间给我的nav和标题组件。
我尝试过让仅基于网格或flexbox的侧边栏(或标题)保持粘性的方法,但它们完全不起作用。
这是一个我所拥有的示例:
我尝试过让仅基于网格或flexbox的侧边栏(或标题)保持粘性的方法,但它们完全不起作用。
这是一个我所拥有的示例:
<div class="grid-container">
<nav>
<div class="menu-item">Link</div>
</nav>
<div class="header"> Header Content Here </div>
<main> Main Section. This should be able to scroll while Nav and
Header are sticking to the top
</main>
</div>
CSS:
.grid-container {
grid-template-columns: 200px 1fr;
grid-template-areas:
"sidenav header"
"sidenav main";
box-shadow: 5px 10px !important;
}
nav {
grid-area: sidenav;
box-shadow: 0 -1px 12px 2px whitesmoke;
background-color: white;
display: none;
z-index: 100;
flex-direction: column;
}
.header {
grid-area: header;
background-color: #f8f9ff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 16px;
}
main {
grid-area: main;
background-color: #f8f9ff;
}