Skip to content

Instantly share code, notes, and snippets.

@stansidel

stansidel/index.html

Last active October 9, 2020 06:05
Show Gist options
  • Save stansidel/109383794c7769e5e6ece1bb74a15ed2 to your computer and use it in GitHub Desktop.
Save stansidel/109383794c7769e5e6ece1bb74a15ed2 to your computer and use it in GitHub Desktop.
Download ZIP
Independently scrollable 3-paner with a header for 2 panes
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
height: 100vh;
display: flex;
flex-wrap: wrap;
flex-direction: row;
overflow: hidden;
}
.left-panel {
display: flex;
flex: 2 0 auto;
overflow-y: scroll;
max-height: 100% !important;
}
.right-content {
display: flex;
flex: 10 0 auto;
flex-direction: column;
overflow: hidden;
height: 100vh;
}
.right-content .header {
}
.right-content-row {
display: flex;
flex-wrap: wrap;
flex-direction: row;
overflow: hidden;
}
.right-content-main {
display: flex;
flex: 3 0 auto;
overflow: auto;
max-height: 100% !important;
}
.right-content-aside {
display: flex;
flex: 1 0 auto;
overflow: auto;
max-height: 100% !important;
}
body {
margin: 0;
}
.left-panel {
background-color: rgba(255, 0, 0, 1);
}
.right-content {
background-color: rgba(0, 255, 0, 1);
}
.right-content .header {
background-color: rgba(0, 0, 255, 0.3);
}
.right-content-row {
background-color: rgba(255, 69, 0, 0.7);
}
.right-content-main {
background-color: rgba(0, 0, 255, 0.2);
}
.right-content-aside {
background-color: rgba(255, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="container">
<div class="left-panel">
<ul>
<li>Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
</ul>
</div>
<div class="right-content">
<div class="header">
<h1>The header</h1>
</div>
<div class="right-content-row">
<div class="right-content-main">
<ul>
<li>Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
</ul>
</div>
<aside class="right-content-aside">
<ul>
<li>Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
</ul>
</aside>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment