使用 CSS 在 flexbox 中创建侧边栏 [英] Creating a Sidebar within a flexbox with CSS

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

问题描述

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

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

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

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

html {高度:100%；}身体 {高度:100%；边距:0；字体系列:Ubuntu；背景:线性渐变(#b3ffab，#67fffc)；}#header {高度:30px；显示:弹性；对齐项目:居中；背景:线性渐变(#444444，#333333)；颜色:#bbbbbb；}#headerContent {左边距:10px；}#页 {显示:弹性；}#边栏{最小宽度:100px；最大宽度:100px；背景:红色；}#内容 {宽度:100%；背景:蓝色；}

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Ubuntu"/><div id="标题"><div id="headerContent">桌面

<div id="页面"><div id="sideBar"><div>框 1

<div>框 2

<div id="内容">内容

解决方案

可以灵活设置高度和宽度.

希望这会有所帮助.

html {高度:100%；}身体 {高度:100%；边距:0；字体系列:Ubuntu；背景:线性渐变(#b3ffab，#67fffc)；}#header {高度:30px；显示:弹性；对齐项目:居中；背景:线性渐变(#444444，#333333)；颜色:#bbbbbb；}#headerContent {左边距:10px；}#页 {显示:弹性；高度:计算(100vh - 30px)；/* 计算高度.标题为 30px */}#边栏{宽度:100px；背景:红色；}#内容 {背景:蓝色；弹性:1 0 自动；/* 启用增长，禁用收缩 */}

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Ubuntu"/><div id="标题"><div id="headerContent">桌面

<div id="页面"><div id="sideBar"><div>框 1

<div>框 2

<div id="内容">内容

on my page I want to have a header and below this I want to have a sidebar on the left side and the content page on the right side.

The sidebar should have a width of X (maybe 100 px) and the content page should have the rest of the full window with.

I started creating this but my sidebar and content page don't have a full height. Even when setting height to 100% the don't fill the rest of the page.

And why do I have to set a min and max width for the sidebar instead of width? When setting width: 100px the width returns 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>

解决方案

You can set the height and width in a flexible way.

Hope this helps.

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>

这篇关于使用 CSS 在 flexbox 中创建侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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