Skip to content

Instantly share code, notes, and snippets.

@smagch

smagch/panedemo.html

Created June 17, 2022 05:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save smagch/bbffe1731135245aa6044866caab40e8 to your computer and use it in GitHub Desktop.
Save smagch/bbffe1731135245aa6044866caab40e8 to your computer and use it in GitHub Desktop.
Download ZIP
horizontal pane
Raw
panedemo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
.hbox {
display: flex;
flex-direction: column;
height: 100%;
}
.container {
height: 100vh;
background-color: tomato;
width: 100%;
}
.header {
height: 100px;
background-color: aqua;
flex-shrink: 0;
}
.header-2 {
height: 100px;
background-color: blue;
flex-shrink: 0;
}
.content {
background-color: red;
}
.pane {
display: flex;
height: 100%;
flex-direction: column;
flex-grow: 1;
background-color: brown;
overflow: hidden;
}
.pane.scrollable {
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="hbox">
<div class="header">header1</div>
<div class="pane">
<div class="header-2">header2</div>
<div class="pane scrollable">
<div class="content">
start
fasdlkf<br />
flkasdj<br />
fasdlkf<br />
flkasdj<br />
fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br /> fasdlkf<br />
flkasdj<br />
fin
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment