如何使用CSS Overflow在不同的div中获取单独的滚动条X和Y

问题描述 投票：0回答：1

我试图在容器内获取一个 y 轴滚动条来滚动 2 个单独的 div，同时在这两个 div 上分别设置 x 滚动条。但它要么根本不显示，要么当我添加溢出属性时破坏我的 div 的任何尺寸......

我用“溢出：滚动”标记了我需要的。希望这对这个非常丰富多彩的例子有所帮助^^ 对此感到抱歉。它帮助我了解不同 CSS 属性对各个 div 的影响。

此外，页面未按预期缩放。我尝试实现另一个堆栈帖子中的小提琴示例：https://jsfiddle.net/2kh20Lsz/以具有静态页眉和页脚，但这并不能真正与我需要的中间滚动条结合使用。

希望有人知道如何让这些东西滚动。

完整示例：https://jsfiddle.net/MBittel/w8cvumqh/

enter image description here

html, body {
  height: 100%;
}
  
div {
  margin: 5px;
}

p {
  margin: 5px;
  background: green;
}

body {
  height: 100%;
}

#main-header, #footer {
  background: silver;
}

#wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#categoryViewContainer {
  display: flex;
  flex-direction: row;
  flex: 1;
  background: orange;
}

#header {
  display: flex;
  flex-direction: row;
  background: blue;
}

#splitter {
  display: flex;
  flex-direction: row;
  background: violet;
}

#right-header {
  overflow-x: auto;
}

#data {
  background: red;
}

#graph {
  background: yellow;
}

#splitter {
  overflow-y: scroll;
  background: pink;

}

#right-content {
  background: lime;
  overflow-x: scroll;
}

#left-content {
  background: gold;
  overflow-x: scroll;
}

#footer {
  flex-grow: 0;
  flex-shrink: 0;
}
<html>
<body>
  <div id="wrapper">
    <div id="main-header">Header</div>
    <div id="categoryViewContainer">
      <div id="data">

        <div id="header">
          <div id="left-header">
            <p>HeaderLeft</p>
          </div>
          <div id="right-header">
            <p>HeaderRight : dsafkljsadklfjkslajdfkljksaldfkasd</p>
          </div>
        </div>

        <div id="splitter">
           <div id="left-content">
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
            <p>LeftContent</p>
          </div>
           <div id="right-content">
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>
            <p>salkhfjlkösadjkflajsklödfjklösdklfjslködafsdf</p>          
          </div>
        </div>

      </div>
      <div id="graph">
        <p>GraphGraphGraph</p>
      </div>
    </div>
    <div id="footer">
      Footer
    </div>
  </div>
</body>
</html>

html css scrollbar overflow
1个回答
0
投票

如果我正确理解你的问题...问题是由#splitter上的align-items属性引起的

使用flex时，align-items属性默认设置为stretch。

如果将其更改为 flex-start，它将不再拉伸（或者在本例中：不再收缩）2 个内部容器到相同的高度。

尝试将这两个值添加到你的jsfiddle中（最大高度只是让我们看到效果）：

#splitter {
    display: flex;
    flex-direction: row;
    background: violet;
    
    align-items:flex-start; /* added to give scrollbar */
    max-height:20em;        /* added for visibility in your example */

    overflow-y: scroll;
    background: pink;
}

来源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-align-items

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.