如何使用 flexbox 创建侧边栏和内容区域? [英] How to create a sidebar and content area using flexbox?

查看：25
本文介绍了如何使用 flexbox 创建侧边栏和内容区域?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

完整代码如下:

HTML

<div class="sidenav"><ul><li>项目 1</li><li>项目 2</li>
<div class="内容">lorem ipsum lorem ...

CSS

html, body {边距:0；高度:100%；}.flex 容器 {显示:-webkit-flex；显示:弹性；背景颜色:红色；高度:100%；}.sidenav {背景颜色:浅灰色；-webkit-flex: 1;弹性:1；}.内容 {背景颜色:浅蓝色；填充:10px；-webkit-flex: 5;弹性:5；}

解决方案

你只需要使用 min-height 而不是 height

html, body {边距:0；高度:100%；}身体 {高度:100%；}.flex 容器 {显示:-webkit-flex；显示:弹性；背景颜色:红色；最小高度:100%；}

html,身体 {边距:0；高度:100%；}身体 {高度:100%；}.flex 容器 {显示:-webkit-flex；显示:弹性；背景颜色:红色；最小高度:100%；}.sidenav {背景颜色:浅灰色；-webkit-flex: 1;弹性:1；}.内容 {背景颜色:浅蓝色；填充:10px；-webkit-flex: 5;弹性:5；高度:2000px；}

<div class="flex-container"><div class="sidenav"><ul><li>项目 1</li>

<div class="内容">lorem ipsum lorem ipsum lorem ipsum ipsum ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ipsum ipsum ipsum ipsumlorem ipsum lorem ipsum lorem ipsum ipsum ipsum ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum loremlorem 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

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 larger than the window, then the height of the sidebar should grow to match that of the content. The idea is that when we scroll to see all the content, the sidebar should appear as if it extends to the same height as that of the content.

Here's my attempt: http://codepen.io/nareshbhatia/pen/QbZqyd. Make the window width really small. Unfortunately the sidebar extends only upto the window height. Also when I scroll down, the content area looses its background color.

Here's the full code:

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;
}

解决方案

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>

这篇关于如何使用 flexbox 创建侧边栏和内容区域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆