How to implement an app layout with header + scrollable sidebar + scrollable content using CSS and HTML only [duplicate]

问题

This question already has answers here:

Percentage Height HTML 5/CSS (6 answers)

How wide is the default `<body>` margin? (2 answers)

Why don't flex items shrink past content size? (2 answers)

How to make an element width: 100% minus padding? (14 answers)

Closed 10 months ago.

I need to build a standard web app with a header, a left side bar (scrollable if too many optinos) and a content are at the right size.

Here is my attempt:

.wrapper {
  font-size: 14px;
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.layout {
  box-sizing: border-box;
  display: flex;
  height: 100%;
  width: 100%;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.header {
  display: flex;
  height: 100%;
  width: 100%;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: grey;
  padding: 10px;
}

.content {
  display: flex;
  height: 100%;
  width: 100%;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.content-sidebar-layout {
  display: flex;
  height: 100%;
  width: 100%;
  flex: 0 1 auto;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

.sidebar {
  display: flex;
  padding: 16px;
  height: 100%;
  width: auto;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background-color: red;
  overflow-y: auto;
}

.pagedata {
  display: flex;
  padding: 16px;
  height: 100%;
  width: 100%;
  text-wrap: nowrap;
  flex: 0 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background-color: blue;
}

<html>
<div class="wrapper">
  <div class="layout">
    <div class="header">
      This is the header
    </div>
    <div class="content">
      <div class="content-sidebar-layout">
        <div class="sidebar">
          <div>Option 1</div>
          <div>Option 2</div>
          <div>Option 3</div>
          <div>Option 4</div>
        </div>
        <div class="pagedata">
          <p>This is the page data</p>
          <p>This is the page data</p>
          <p>This is the page data</p>
          <p>This is the page data</p>
          <p>This is the page data</p>
          <p>This is the page data</p>
          <p>This is the page data</p>
          <p>This is the page data</p>
        </div>
      </div>
    </div>
  </div>
</div>

</html>

The sidebar must be fixed at the left side. If the number of options exceeds the available height, the scroll bar must scroll vertically.

For the main content area, it must be scrollable X and Y depending on the content size with no relation to the sidebar scroll (they should be independent).

The content-sidebar-layout is a wrapper class to the page content, as some pages does not have a sidebar (like the login, error and some other pages).

How to fix the given code to have the desired behaviour without using jQuery or javascript (pure CSS/HTML solution) ?

There are many posts describing individual aspects of heights, but I cannot find on SO a full layout like this.

来源：https://stackoverflow.com/questions/61027161/how-to-implement-an-app-layout-with-header-scrollable-sidebar-scrollable-con

标签

html

css

sidebar