使用React和CSS Grid的复杂布局

Question

因此，我尝试创建以上内容。有制作菜单组件的聪明方法吗？还是容器元素必须覆盖大部分内容组件（它必须是矩形，并且本身使用CSS Grid定位菜单的左侧和顶部）？

Answer 1

这与您的单个“ L”形组件要求不完全匹配，但是应该比以前更紧密。

一些值得一提的笔记：

1. 这只是将您的问题作为html / css问题来回答，而不是以React风格来回答。您可以通过使用body-content以外的每个html / css元素，然后将body-content html / css作为子元素，像希望的那样将其分为两个部分
2. 不确定要如何处理内容，但是使用此代码，App-Header将随内容滚动。如果要使其固定并停留在内容上方，请复制MainMenu的CSS，但是将其样式设置为垂直滚动。

希望这会使您朝正确的方向前进。

body {
  margin: 0px;
}

.App-header {
  background-color: #203764;
  height: 80px;
  padding: 10px;
  color: white;
}

/* Style page content */
.main-content {
    margin-left: 160px; /* Same as the width of the MainMenu */
}

.body-content {
  padding: 20px;
}


/* The MainMenu menu */
.MainMenu {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 160px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    color: #FFF;
}

<div class="App">
  <div class="MainMenu">Main Menu</div>
  <div class="main-content">
    <header class="App-header">Header</header>
    <div class="body-content">Content</div>
  </div>
</div>