具有固定位置(无滚动)侧栏的Flex布局 [英] Flex Layout with fixed position (no scrolling) sidebar

问题描述

我有一个带有左右画布侧边栏的布局，中间包含主要内容"区域.

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小提琴: http://jsfiddle.net/Windwalker/gfozfpa6/2/

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:

.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;
}

推荐答案

请查看提供的解决方案的类似问题:.

Please look at the similar question with provided solution: How to simulate '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>

并在CSS中添加适当的样式:

And add proper styling in CSS:

.fixed {
    position: fixed;
    width: 57px; /* according to #canvas-left */
}

以下是带有固定的左侧边栏的代码示例: http://jsfiddle.net/8hm3849m/.请注意，此技巧无法为侧边栏提供适当的灵活网格，包装的宽度应固定(或通过JavaScript动态设置).

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).

这篇关于具有固定位置(无滚动)侧栏的Flex布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！