Html 具有固定位置（无滚动）侧边栏的 Flex 布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31722839/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flex Layout with fixed position (no scrolling) sidebar
提问by Windwalker
I have a layout with left and right canvas sidebars, enclosing the Main content area in the middle.
我有一个左右画布侧边栏的布局，将主要内容区域包围在中间。
The sidebars and main content are flex items, positioned in a flex layout left to right.
侧边栏和主要内容是弹性项目，从左到右定位在弹性布局中。
The sidebars contain menus and meta links.
侧边栏包含菜单和元链接。
My question is: when scrolling the content area, is it possible to leave the sidebars in fixed position, such that they stay in top position and do not scroll down?
我的问题是：滚动内容区域时，是否可以将侧边栏保持在固定位置，使它们保持在顶部位置而不向下滚动？
JS Fiddle: http://jsfiddle.net/Windwalker/gfozfpa6/2/
JS小提琴：http: //jsfiddle.net/Windwalker/gfozfpa6/2/
HTML:
HTML：
<div class="flexcontainer">
<div class="flexitem" id="canvas-left">
<p>This content should not scroll</p>
</div>
<div class="flexitem" id="content">
<div>
<p>Scrolling Content</p>
</div>
</div>
<div class="flexitem" id="canvas-right">
<p>This content should not scroll</p>
</div>
</div>
CSS:
CSS：
.flexcontainer {
display: flex;
flex-direction: row;
min-height: 100%;
align-items: stretch;
}
.flexitem {
display: flex;
}
#canvas-left {
background: yellow;
order: -1;
flex: 0 0 57px;
}
#content {
background: green;
order: 1;
padding: 1rem;
}
#content div {
display: block;
}
#canvas-right{
background: blue;
order: 2;
flex: 0 0 57px;
}
回答by user3576508
Please look at the similar question with provided solution: How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar.
请使用提供的解决方案查看类似的问题：How to simulation 'position:fixed' behavior on Flexbox-aligned sidebar。
According to your code you can also wrap your inner content in "position: fixed" wrapper:
根据您的代码，您还可以将内部内容包装在“位置：固定”包装器中：
<div class="flexitem" id="canvas-left">
<div class="fixed">
<p>This content should not scroll</p>
</div>
</div>
And add proper styling in CSS:
并在 CSS 中添加适当的样式：
.fixed {
position: fixed;
width: 57px; /* according to #canvas-left */
}
Here is an example of your code with fixed left sidebar: http://jsfiddle.net/8hm3849m/. Note that this trick won't provide you proper flexible grid for sidebars, width of the wrapper should be fixed (or set dynamically via JavaScript).
这是带有固定左侧边栏的代码示例：http: //jsfiddle.net/8hm3849m/。请注意，此技巧不会为侧边栏提供适当的灵活网格，包装器的宽度应该是固定的（或通过 JavaScript 动态设置）。
回答by Istopopoki
The question is old, but I solved a similar issue using
问题很老，但我使用解决了类似的问题
position: sticky;
top: 0;
for the left and right items. Also I removed the
对于左右项目。我也删除了
display: flex
css for the flex items, I don't think that's necessary.
flex 项目的 css，我认为没有必要。
回答by jak89 _1
i dont know how do it with flex, but here is a easyer/alternate css remove all that flex... and try to never add padding to a outer div, its easyer in inner items, then you dont need to calculate if there are to many divs
我不知道如何使用 flex，但这里有一个更简单/替代的 css 删除所有 flex ......并尝试永远不要向外部 div 添加填充，它在内部项目中更容易，那么你不需要计算是否有许多div
.flexcontainer {
display: block;
min-height: 100%;
align-items: stretch;
}
.flexitem {
display: flex;
}
#canvas-left {
background: yellow;
order: -1;
left: 0px;
width: 20%;
position: fixed;
}
#content {
position: absolute;
background: green;
order: 1;
width: 60%;
left: 20%;
}
#content p {
display: block;
padding: 1rem;
}
#canvas-right{
background: blue;
order: 2;
right: 0px;
width: 20%;
position: fixed;
}
