How to create a sidebar and content area using flexbox?

前端未结

关注

 1  1091

I would like to use flexbox to create a sidebar and a main content area. The height of the sidebar should be at least that of the window. However, if the content height is l

相关标签:

1条回答

一向

2020-12-20 08:28

You just need to use min-height instead of height

html, body {
    margin: 0;
    height: 100%;
}

body {
  height: 100%;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    background-color: red;
    min-height: 100%;
}

html,
body {
  margin: 0;
  height: 100%;
}
body {
  height: 100%;
}
.flex-container {
  display: -webkit-flex;
  display: flex;
  background-color: red;
  min-height: 100%;
}
.sidenav {
  background-color: lightgray;
  -webkit-flex: 1;
  flex: 1;
}
.content {
  background-color: lightblue;
  padding: 10px;
  -webkit-flex: 5;
  flex: 5;
  height: 2000px;
}

<body>
  <div class="flex-container">
    <div class="sidenav">
      <ul>
        <li>Item 1</li>
      </ul>
    </div>
    <div class="content">
      lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
      ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    </div>
  </div>
</body>

0 讨论(0)