如何使用flexbox创建侧边栏和内容区域? [英] How to create a sidebar and content area using flexbox?
问题描述
我想使用flexbox创建一个侧边栏和一个主要的内容区域.侧栏的高度应至少为窗口的高度.但是，如果内容的高度大于窗口的高度，则侧边栏的高度应增加以匹配内容的高度.这个想法是，当我们滚动查看所有内容时，侧边栏应该看起来像它延伸到与内容的高度一样.
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.
这是我的尝试: http://codepen.io/nareshbhatia/pen/QbZqyd .使窗口宽度很小.不幸的是，侧边栏仅延伸到窗口高度.另外，当我向下滚动时，内容区域会松开其背景颜色.
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.
这是完整的代码:
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;
}
推荐答案
您只需要使用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创建侧边栏和内容区域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
