html - 使用 CSS 在 flexbox 中创建侧边栏

Question

这个问题在这里已经有了答案:





How to create a sidebar and content area using flexbox?

(1 个回答)



Flexbox layout, push content when opening sidebar?

(1 个回答)



Flexbox sidebar with max-width

(1 个回答)


3年前关闭。




在我的页面上，我想有一个标题，在此之下，我想在左侧有一个侧边栏，在右侧有一个内容页面。

侧边栏的宽度应为 X(可能为 100 像素)，内容页面应包含整个窗口的其余部分。



我开始创建这个，但我的侧边栏和内容页面没有全高。即使将高度设置为 100%，也不会填充页面的其余部分。

为什么我必须为侧边栏设置最小和最大宽度而不是宽度？设置时width: 100px宽度返回 70px。

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  font-family: Ubuntu;
  background: linear-gradient(#b3ffab, #67fffc);
}

#header {
  height: 30px;
  display: flex;
  align-items: center;
  background: linear-gradient(#444444, #333333);
  color: #bbbbbb;
}

#headerContent {
  margin-left: 10px;
}

#page {
  display: flex;
}

#sideBar {
  min-width: 100px;
  max-width: 100px;
  background: red;
}

#content {
  width: 100%;
  background: blue;
}

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Ubuntu" />

<div id="header">
  <div id="headerContent">
    Desktop
  </div>
</div>

<div id="page">
  <div id="sideBar">
    <div>
      box 1
    </div>
    <div>
      box 2
    </div>
  </div>
  <div id="content">
    content
  </div>
</div>

Answer 1

您可以灵活地设置高度和宽度。

高度设置为视口(viewport)高度减去标题高度的 100%。

侧边栏的宽度设置为 100px。现在允许内容增长以填满屏幕的其余部分。

希望这可以帮助。

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  font-family: Ubuntu;
  background: linear-gradient(#b3ffab, #67fffc);
}

#header {
  height: 30px;
  display: flex;
  align-items: center;
  background: linear-gradient(#444444, #333333);
  color: #bbbbbb;
}

#headerContent {
  margin-left: 10px;
}

#page {
  display: flex;
  height: calc( 100vh - 30px);
  /* calculate the height. Header is 30px */
}

#sideBar {
  width: 100px;
  background: red;
}

#content {
  background: blue;
  flex: 1 0 auto;
  /* enable grow, disable shrink */
}

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Ubuntu" />

<div id="header">
  <div id="headerContent">
    Desktop
  </div>
</div>

<div id="page">
  <div id="sideBar">
    <div>
      box 1
    </div>
    <div>
      box 2
    </div>
  </div>
  <div id="content">
    content
  </div>
</div>