css - 使用 React 和 CSS Grid 的复杂布局

Question

所以我正在尝试创建以上内容。有没有一种制作菜单组件的聪明方法？或者容器元素是否必须覆盖大部分内容组件(它必须是一个矩形并且本身使用 CSS Grid 来定位菜单的左侧部分和顶部部分)？

Answer 1

这并不完全符合您对单个“L”形组件的要求，但应该比以前更接近。

一些值得一提的注意事项:

1. 这只是作为 html/css 问题回答您的问题，而不是 React 风格。您可以像希望的那样将其拆分为两个组件，方法是使用除 body-content 之外的每个 html/css 元素，然后将 body-content html/css 作为 child
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>