使用CSS在Flexbox中创建侧边栏 [英] Creating a Sidebar within a flexbox with CSS
问题描述
在我的页面上,我想有一个标题,在它的下面,我想在左侧有一个侧边栏,在右边是一个内容页面.
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.
侧边栏的宽度应为X(可能为100像素),内容页面的其余部分应与整个窗口保持一致.
The sidebar should have a width of X (maybe 100 px) and the content page should have the rest of the full window with.
我开始创建它,但是我的侧边栏和内容页面没有完整的高度.即使将高度设置为100%,也不会填满页面的其余部分.
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.
为什么我必须为侧边栏设置最小和最大宽度而不是宽度?设置 width:100px
时,宽度返回70px.
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.
- 高度设置为视口高度减去标题高度的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>
这篇关于使用CSS在Flexbox中创建侧边栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!