Thiết kế website giá rẻ

Question

I’m trying to get a y-axis scrollbar inside a container to scroll 2 seperate divs, while having x-scrollbars on both of those divs individually. But it either doesn’t show up at all, or destroys any dimensions of my divs when I add overflow properties…

I marked the ones I need with “overflow: scroll”. Hopes this helps in the very colorful example^^
Sorry for that. It helps me learn the effects of the different CSS Properties on the individual divs.

Furthermore the page doesn’t scale as expected. I tried to implement the fiddle example from another stack post: https://jsfiddle.net/2kh20Lsz/ to have static header and footer, but that didn’t really work in combination with the scrollbars I need in the middle.

Hope somebody knows how to get those things scrolling.

https://jsfiddle.net/MBittel/w8cvumqh/

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>

Thiết kế website giá rẻ

Danh mục

How to get seperate Scrollbars X and Y in different divs with CSS Overflow