Html 具有多个可滚动区域的CSS Flexbox_Html_Css_Flexbox

Html 具有多个可滚动区域的CSS Flexbox

html css

Html 具有多个可滚动区域的CSS Flexbox,html,css,flexbox,Html,Css,Flexbox,我试图创建一个flexbox，它有一个标题，然后是一个左窗格（可滚动）和右窗格（可滚动）。它们需要能够彼此分开滚动。最重要的是，父框架必须完全占据宽度和高度的100% 下面是我试图实现的一个图像我还有一个片段，到目前为止我已经尝试过了我可以捏造它，不使用flexbox，但当我离它如此近的时候不使用它似乎是一种浪费（单独的可滚动区域和粘性标题目前不起作用）正文{ 字体：标题；保证金：0；填充：0；溢出：隐藏； } /** *主flex容器 */ 分区flex-main-conta

我试图创建一个flexbox，它有一个标题，然后是一个左窗格（可滚动）和右窗格（可滚动）。它们需要能够彼此分开滚动。最重要的是，父框架必须完全占据宽度和高度的100%

下面是我试图实现的一个图像

我还有一个片段，到目前为止我已经尝试过了

我可以捏造它，不使用flexbox，但当我离它如此近的时候不使用它似乎是一种浪费（单独的可滚动区域和粘性标题目前不起作用）

正文{
字体：标题；
保证金：0；
填充：0；
溢出：隐藏；
}
/**
*主flex容器
*/
分区flex-main-container{
位置：绝对位置；
左：0；
排名：0；
底部：0；
右：0；
显示器：flex；
弯曲方向：立柱；
}
/**
*固定头
*/
分区伸缩式收割台{
背景色：#FF0000；
}
/**
*标题下的容器用于容纳两行
*/
div.flex-content{
背景色：#E0；
显示器：flex；
弯曲方向：行；
}
/**
*左柔性容器
*/
div.flex-file{
弹性：3；
溢出y：自动；
背景色：#00DD00；
}
/**
*右柔性容器
*/
分区柔性插入件{
弹性：7；
背景色：#00FFDD；
}


此处的标题内容

此处的标题内容

此处的标题内容

此处的标题内容

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一只猫。暂停使用设备。Fusce efficitur est sem，nec posuere neque iaculis quis。尤伊斯莫·马萨（Curabitur euismod massa）坐在艾米特·莫里斯·波特托尔（amet mauris porttitor）的同侧车辆上。莫利斯·马蒂斯坐在阿梅特乌尔纳。纳姆调味品拉齐尼亚的一种讲坛。直径为非猫科动物的悬钩子。Donec faucibus non arcu vel fringilla。莫里斯·内克·多洛，亨德雷特·胡斯托。这是欧洲猫科动物的最大无效期。奥古斯都的前庭和前庭。前庭luctus erat a nullas sollicitudin auctor。整数代表利奥，符号代表时间，元素代表智慧
欧盟委员会的重要成员。库拉比图尔·奥纳雷·奥纳雷是一种调味品。莫里斯·坦普尔·尼斯坐在阿梅特·努克·费吉亚的位子上，坐在阿梅特·乌兰科珀·托托·福西布斯的位子上。馆长：尼斯利奥、卢库斯利奥、索达莱斯莱克托。nunc quis sodales的Quisque fringilla。Phasellus eget dapibus velit，nec aliquam sem。不，我是莫比·奎斯·福西布斯·尼西。发酵库拉索酵母。相思交流对决。苏达莱斯大师、法雷特拉无显要人物、自由智者权杖大师、奥特莱斯·维韦拉自由女神。库拉比图尔·尼西·波特托，埃利芬德·米·佩尔迪特，汽车码头。请暂时停止
Nam elementum sem非turpis dictum，ut Placelat nunc posuere。在leo Temporal hendrerit vitae et enim公司工作。这是一个充满活力的世界。这是一个非常重要的问题。自由国家的无效率。但我们坐在阿梅特·阿库·莫莱斯蒂·维韦拉的位子上。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。佩伦茨克威尼斯精英苏打水和其他苏打水。但tempus拍卖行位于bibendum。普罗宁益普生，维尼那提斯·韦尔布兰迪特等，马萨的名言。Donec augue purus，egestas sed enim et，怀孕前直径。Morbi tincidunt cursus augue id调味品。毛里斯·康格·利伯罗·图皮斯，奎斯·拉奥里特·奥古斯·内克
无酵素发酵液。无直径的前驱体。我们的同侧坐在枕弓上，我们的同侧坐在枕弓上，我们的同侧坐在枕弓上，我们的同侧坐在枕弓上，我们的同侧坐在枕弓上，我们的同侧坐在枕弓上，我们的同侧坐在枕弓上。在阿利奎特·福西布斯·普卢斯的作品中，在阿利奎姆·乌纳·波苏尔的作品中。麦格纳ac调味品公司的杜伊斯·弗里利亚。我是尼布·奥奇。这是一句关于爱欲的名言，而不是一句关于爱欲的名言
插入数据

HTML

<body>
    <div class="flex-header">
        Header content here
        <br/> Header content here
        <br/> Header content here
        <br/> Header content here
        <br/>
    </div>
    <div class="flex-main-container">
        <div class="flex-content">
            <div class="flex-files">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            </div>
            <div class="flex-insert">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
            </div>
        </div>
    </div>
</body>

注:

你写道：
最重要的是，父框架必须完全占据宽度和高度的100%
这可以通过
```
html，body{height:100%；}
```
实现。您不需要
```
位置：绝对
```


固定收割台具有定义的高度，这使flex容器能够使用边距顶部
缓冲区将自身定位在收割台下方
如果不希望为收割台定义高度，请参见此处：
添加到中的min height:0
和min width:0
。flex content
是解决Firefox中垂直滚动错误所必需的。详情如下：


上面调整后的代码呈现具有两个可滚动区域的固定标题：

在Chrome、Firefox和IE11上测试
先生，您是一位传奇人物。谢谢你这么说：）
html {
  height: 100%; /* full height of viewport */
}

body {
  height: calc(100% - 80px); /* prevent vertical scrollbar on browser; see below */
  font: caption;
  margin: 0;
  padding: 0;
}

div.flex-header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px; /* height for header; adjustable; can be fixed or relative units */
  background-color: #FF0000;
}

div.flex-main-container {
  /* position: absolute;  <-- Removed. Not necessary. */
  margin-top: 80px; /* compensate for header height */
  display: flex;
  flex-direction: column;
  height: 100%;
}

div.flex-content {
  background-color: #E0E0E0;
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0; /* addresses FF vertical scroll bug */
  min-width: 0; /* addresses FF vertical scroll bug */
}

div.flex-files {
  flex: 3;
  overflow-y: auto;
  background-color: #00DD00;
}

div.flex-insert {
  overflow-y: auto;
  flex: 7;
  background-color: #00FFDD;
}