Skip to content

Instantly share code, notes, and snippets.

@RaduW

RaduW/fullPage.html

Created August 23, 2023 16:30
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 RaduW/df70c47b249c51a9dea4d783f6629fc2 to your computer and use it in GitHub Desktop.
Save RaduW/df70c47b249c51a9dea4d783f6629fc2 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Layout with scrolling
Raw
fullPage.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
text-align: center;
}
.Child {
background-color: purple;
color: white;
height: 1700px;
}
.Details {
background-color: #fcecfc;
width: 7em;
}
.Statusbar , .Toolbar{
background-color: moccasin;
height: 3em;
}
html, body {
height: 100%;
}
.v-box {
display: flex;
flex-direction: column;
}
.h-box {
display: flex;
flex-direction: row;
}
.flex {
flex: 1 1 auto;
}
.full {
height: 100%;
width: 100%;
}
.scroll {
overflow: auto;
}
</style>
</head>
<body>
<div class="v-box full">
<div class="Toolbar">toolbar</div>
<div class="Main flex h-box scroll">
<div class="Details">details</div>
<div class="Inner flex scroll">
<div class="Child"></div>
</div>
<div class="Details">details</div>
</div>
<div class="Statusbar">status</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment