Question

我想使用flexbox创建侧边栏和主要内容区域。侧边栏的高度应至少为窗口的高度。但是，如果内容高度大于窗口，则侧边栏的高度应该增长以匹配内容的高度。我们的想法是，当我们滚动查看所有内容时，侧边栏应该看起来好像它延伸到与内容相同的高度。

这是我的尝试：http://codepen.io/nareshbhatia/pen/QbZqyd。使窗口宽度非常小。不幸的是，侧边栏仅延伸到窗户高度。此外，当我向下滚动时，内容区域会丢失其背景颜色。

这里是完整的代码：

HTML

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

CSS

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

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

.sidenav {
    background-color: lightgray;
    -webkit-flex: 1;
    flex: 1;
}

.content {
    background-color: lightblue;
    padding: 10px;
    -webkit-flex: 5;
    flex: 5;
}

Answer 1

您只需使用min-height代替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>

如何使用flexbox创建侧边栏和内容区域？

1 个答案: