How to make one column scrollable while holding the others fixed?

How to make one column scrollable while holding the others fixed? - html

I've this layout that I made using tailwindcss
<div class="h-screen flex flex-col">
<!-- Navbar -->
<nav
class="flex justify-between items-center shadow-sm z-10 px-4 col-span-5"
>
<div>
<img class="h-16" src="~/assets/imgs/logo-01.png" alt="optado logo" />
</div>
<div>
Icons
</div>
<div>
Avatar
</div>
</nav>
<!-- Main View -->
<main class="bg-gray-500 h-full grid grid-cols-5">
<div class="col-span-1 bg-white flex flex-col">
<div class="calender">
<p>today</p>
<p>tomorrow</p>
<p>upcoming</p>
</div>
<hr />
<div class="projects flex-grow">
<p>project</p>
<p>project</p>
<p>project</p>
<p>project</p>
<p>project</p>
</div>
<hr />
<div>
<button>Click me</button>
</div>
</div>
<div class="col-span-3 bg-gray-100"></div>
<div class="col-span-1 bg-white"></div>
</main>
</div>
I want to have the layout height equal to the height of the screen, so when I add more projects to the div with class projects it becomes scrollable while holding the rest of the screen fixed.
Example of what i want is shown in the image below where the grey rectangle denotes the scrolling bar

I created this layout hack using Flexbox. Please click on full view link to see better output.
Use this html structure as a starting point and add your own content:
html {
height: 100%;
font-family: sans-serif;
}
body {
height: 100%;
overflow: hidden;
margin: 0px;
display: flex;
}
.column {
height: 100%;
display: flex;
flex-direction: column;
}
#left {
flex-shrink: 0;
background-color: white;
}
#right {
background-color: #f3f3f3;
}
.top-left {
flex-shrink: 0;
background-color: #333;
color: white;
padding: 20px;
}
.top-right {
display: inline-flex;
flex-shrink: 0;
background-color: #333;
color: white;
padding: 20px;
}
.bottom {
flex-grow: 1;
overflow-y: auto;
padding: 20px;
}
ul {
display: inline-flex;
list-style: none;
margin: 0;
}
li {
margin-right: 20px;
}
<div id="left" class="column">
<div class="top-left">Top Left</div>
<div class="top-left" style="height:150px; background:rgba(0,0,0,0.1)">Top Left 2</div>
<div class="bottom">
<p>one</p>
<p>two</p>
<p>three</p>
<p>four</p>
<p>five</p>
<p>six</p>
<p>seven</p>
<p>eight</p>
<p>nine</p>
<p>ten</p>
<p>eleven</p>
<p>twelve</p>
<p>thirteen</p>
<p>fourteen</p>
<p>fifteen</p>
<p>sixteen</p>
<p>seventeen</p>
<p>eighteen</p>
<p>nineteen</p>
<p>twenty</p>
<p>twenty-one</p>
<p>twenty-two</p>
<p>twenty-three</p>
<p>twenty-four</p>
<p>twenty-five</p>
<p>twenty-six</p>
<p>twenty-seven</p>
<p>twenty-eight</p>
<p>twenty-nine</p>
<p>thirty</p>
</div>
<div class="top-left3" style="border-top:1px solid #333; height:100px; padding-top:20px; text-align:center;">Add project</div>
</div>
<div id="right" class="column">
<div class="top-right">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div class="bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam massa, ornare at turpis quis, varius pulvinar lorem. Morbi eleifend nisi eget viverra fermentum. Vivamus interdum dui quis orci placerat semper. Morbi lobortis ex sit amet risus cursus pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam luctus leo augue, non facilisis nunc aliquam sed. Aliquam erat volutpat. Nam laoreet cursus nunc, id tincidunt justo. Nullam elit magna, finibus at aliquam ut, blandit vel magna. Phasellus ullamcorper urna a leo luctus vestibulum. Duis posuere leo ac lectus auctor, convallis aliquam odio gravida.</p>
<p>Sed porttitor turpis quis est pellentesque, in accumsan risus porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas quis elit sed felis dapibus sodales ut auctor nibh. Mauris dapibus diam in ante scelerisque ultrices. Nam tincidunt lorem vel ultricies sodales. Nullam facilisis placerat pulvinar. Nullam in arcu urna. Pellentesque tempus lorem et ligula viverra convallis. Integer id vehicula quam, sit amet dictum urna. Praesent pellentesque hendrerit risus non pharetra. In a libero finibus, hendrerit justo quis, consequat nunc. Sed iaculis efficitur nunc sagittis hendrerit. Praesent ligula augue, malesuada quis pretium semper, facilisis non quam. Phasellus ac placerat mi. Quisque ac fermentum tellus.</p>
<p>Duis facilisis aliquet neque, nec dignissim dolor venenatis non. Donec quis consectetur nibh. Ut ut purus in metus pellentesque feugiat non ut augue. Aenean at leo vulputate, viverra ligula ut, aliquam turpis. Cras nunc dui, sollicitudin quis lorem sit amet, auctor mollis libero. Integer non magna ipsum. Etiam ullamcorper urna tortor, nec tempor tortor elementum et. Donec placerat mi nisi, id rhoncus lacus sodales sed. Nullam lorem risus, sollicitudin non lacinia a, scelerisque et mauris. Vivamus nisi enim, egestas ac ante eu, molestie vestibulum felis. Praesent vitae dui tincidunt mi malesuada pharetra. Integer vehicula leo at laoreet tempor. In vestibulum rutrum tellus, eget suscipit orci egestas et. Vestibulum tincidunt aliquam dui, ac pharetra eros commodo ut. Sed tempus eget orci a laoreet. Donec gravida imperdiet congue.</p>
<p>Proin at iaculis velit, et finibus lorem. Aenean ac enim pretium, hendrerit nunc in, tincidunt mauris. Suspendisse congue ipsum nec libero sagittis pretium. Quisque vulputate sem est, in laoreet orci sagittis sed. Vestibulum in lectus eleifend, lacinia lectus in, maximus tortor. Mauris quis posuere arcu, nec hendrerit mauris. In pulvinar sodales rhoncus. In hac habitasse platea dictumst. Ut tempor mattis ligula sed dapibus.</p>
<p>Sed vel condimentum elit. Donec varius ex eget vestibulum egestas. Cras sed cursus massa, eget feugiat sapien. Cras maximus lectus mi, a rhoncus libero gravida quis. Fusce luctus malesuada elementum. Integer nec lectus convallis, ullamcorper orci eu, bibendum nisl. Cras hendrerit mi fringilla ante egestas pharetra. Ut sollicitudin suscipit turpis, eleifend pharetra nisl mollis sit amet. Nulla mauris elit, venenatis luctus dictum sit amet, aliquet nec leo. Fusce sed sapien libero. In lacus dui, porttitor tempus ullamcorper ac, laoreet id massa. Nulla facilisi.</p>
<p>Proin at iaculis velit, et finibus lorem. Aenean ac enim pretium, hendrerit nunc in, tincidunt mauris. Suspendisse congue ipsum nec libero sagittis pretium. Quisque vulputate sem est, in laoreet orci sagittis sed. Vestibulum in lectus eleifend, lacinia lectus in, maximus tortor. Mauris quis posuere arcu, nec hendrerit mauris. In pulvinar sodales rhoncus. In hac habitasse platea dictumst. Ut tempor mattis ligula sed dapibus.</p>
<p>Sed vel condimentum elit. Donec varius ex eget vestibulum egestas. Cras sed cursus massa, eget feugiat sapien. Cras maximus lectus mi, a rhoncus libero gravida quis. Fusce luctus malesuada elementum. Integer nec lectus convallis, ullamcorper orci eu, bibendum nisl. Cras hendrerit mi fringilla ante egestas pharetra. Ut sollicitudin suscipit turpis, eleifend pharetra nisl mollis sit amet. Nulla mauris elit, venenatis luctus dictum sit amet, aliquet nec leo. Fusce sed sapien libero. In lacus dui, porttitor tempus ullamcorper ac, laoreet id massa. Nulla facilisi.</p>
<p>Proin at iaculis velit, et finibus lorem. Aenean ac enim pretium, hendrerit nunc in, tincidunt mauris. Suspendisse congue ipsum nec libero sagittis pretium. Quisque vulputate sem est, in laoreet orci sagittis sed. Vestibulum in lectus eleifend, lacinia lectus in, maximus tortor. Mauris quis posuere arcu, nec hendrerit mauris. In pulvinar sodales rhoncus. In hac habitasse platea dictumst. Ut tempor mattis ligula sed dapibus.</p>
<p>Sed vel condimentum elit. Donec varius ex eget vestibulum egestas. Cras sed cursus massa, eget feugiat sapien. Cras maximus lectus mi, a rhoncus libero gravida quis. Fusce luctus malesuada elementum. Integer nec lectus convallis, ullamcorper orci eu, bibendum nisl. Cras hendrerit mi fringilla ante egestas pharetra. Ut sollicitudin suscipit turpis, eleifend pharetra nisl mollis sit amet. Nulla mauris elit, venenatis luctus dictum sit amet, aliquet nec leo. Fusce sed sapien libero. In lacus dui, porttitor tempus ullamcorper ac, laoreet id massa. Nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam massa, ornare at turpis quis, varius pulvinar lorem. Morbi eleifend nisi eget viverra fermentum. Vivamus interdum dui quis orci placerat semper. Morbi lobortis ex sit amet risus cursus pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam luctus leo augue, non facilisis nunc aliquam sed. Aliquam erat volutpat. Nam laoreet cursus nunc, id tincidunt justo. Nullam elit magna, finibus at aliquam ut, blandit vel magna. Phasellus ullamcorper urna a leo luctus vestibulum. Duis posuere leo ac lectus auctor, convallis aliquam odio gravida.</p>
<p>Sed porttitor turpis quis est pellentesque, in accumsan risus porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas quis elit sed felis dapibus sodales ut auctor nibh. Mauris dapibus diam in ante scelerisque ultrices. Nam tincidunt lorem vel ultricies sodales. Nullam facilisis placerat pulvinar. Nullam in arcu urna. Pellentesque tempus lorem et ligula viverra convallis. Integer id vehicula quam, sit amet dictum urna. Praesent pellentesque hendrerit risus non pharetra. In a libero finibus, hendrerit justo quis, consequat nunc. Sed iaculis efficitur nunc sagittis hendrerit. Praesent ligula augue, malesuada quis pretium semper, facilisis non quam. Phasellus ac placerat mi. Quisque ac fermentum tellus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam massa, ornare at turpis quis, varius pulvinar lorem. Morbi eleifend nisi eget viverra fermentum. Vivamus interdum dui quis orci placerat semper. Morbi lobortis ex sit amet risus cursus pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam luctus leo augue, non facilisis nunc aliquam sed. Aliquam erat volutpat. Nam laoreet cursus nunc, id tincidunt justo. Nullam elit magna, finibus at aliquam ut, blandit vel magna. Phasellus ullamcorper urna a leo luctus vestibulum. Duis posuere leo ac lectus auctor, convallis aliquam odio gravida.</p>
<p>Sed porttitor turpis quis est pellentesque, in accumsan risus porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas quis elit sed felis dapibus sodales ut auctor nibh. Mauris dapibus diam in ante scelerisque ultrices. Nam tincidunt lorem vel ultricies sodales. Nullam facilisis placerat pulvinar. Nullam in arcu urna. Pellentesque tempus lorem et ligula viverra convallis. Integer id vehicula quam, sit amet dictum urna. Praesent pellentesque hendrerit risus non pharetra. In a libero finibus, hendrerit justo quis, consequat nunc. Sed iaculis efficitur nunc sagittis hendrerit. Praesent ligula augue, malesuada quis pretium semper, facilisis non quam. Phasellus ac placerat mi. Quisque ac fermentum tellus.</p>
</div>
</div>

Related

How can I add a vertical scrollbar to a sidebar of links using Flexbox and no set heights?

I'm trying to achieve a layout with HTML/CSS that has a header with no set height, and a sidebar and content area next to each other below the header that take up the remaining height of the screen. In addition, the sidebar often has so many links that the links scroll off the screen, but instead of that happening, I would like to add a vertical scrollbar to just the sidebar section, and not have there be a scrollbar for the entire page.
I've been trying everything I can think of and find online, but nothing seems to be working. Here's some basic HTML/CSS to demonstrate the layout and the problem:
<!DOCTYPE html>
<html>
<head>
<style>
body,
div,
h1,
html,
li,
ul {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
h1 {
line-height: 1;
}
ul {
list-style: none;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
}
.header {
background: #CC76CC;
padding: 40px 20px;
}
.sidebar-and-content {
display: flex;
flex: 1;
}
.sidebar {
background: #DDD;
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 225px;
}
.nav-links-container {
flex: 1;
overflow-y: scroll;
}
.nav-links li {
border-bottom: #999 solid 1px;
padding: 20px;
}
.content {
background: #FFFF91;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="sidebar-and-content">
<div class="sidebar">
<div class="nav-links-container">
<ul class="nav-links">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="content">
</div>
</div>
</div>
</body>
</html>
Does anyone have any good ideas and/or know how to solve this problem? Thank you.

body,
div,
h1,
html,
li,
ul {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
h1 {
line-height: 1;
}
ul {
list-style: none;
}
.container {
display: flex;
flex-direction: column;
height:100vh;
}
.header {
background: #CC76CC;
padding: 40px 20px;
}
.sidebar-and-content {
display: flex;
flex: 1;
height:1px ;
}
.sidebar {
background: #DDD;
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 225px;
}
.nav-links-container {
flex: 1;
overflow: auto;
}
.nav-links li {
border-bottom: #999 solid 1px;
padding: 20px;
}
.content {
background: #FFFF91;
flex: 1;
overflow :auto ;
}
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="sidebar-and-content">
<div class="sidebar">
<div class="nav-links-container">
<ul class="nav-links">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper porta ante, sit amet euismod ipsum venenatis vitae. Mauris ut tristique nibh, a ultricies nulla. Nullam fermentum eu mi ac cursus. Integer semper suscipit ex eu mattis. Phasellus iaculis ultricies ornare. Suspendisse ut nisi diam. Nunc pellentesque lacinia turpis vehicula pharetra. Aenean aliquam cursus elit nec fermentum. Morbi sed tempor nunc. In efficitur arcu ut finibus ultricies.
Suspendisse cursus semper semper. Praesent elit metus, venenatis vitae dictum eu, viverra ut tellus. Vestibulum ornare dui sit amet enim consectetur ornare. Cras porttitor nisl ultrices erat laoreet, ut ultricies quam condimentum. Duis a magna quis mi consequat facilisis id id dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer suscipit odio nibh, quis fermentum tellus hendrerit et.
Nam et euismod eros, id porttitor velit. Ut eget porttitor nibh, non interdum magna. Donec facilisis quis orci pharetra semper. Curabitur hendrerit massa interdum lacinia cursus. Aenean rutrum, lectus non efficitur sodales, sem lacus volutpat lectus, sed pharetra nisl metus in tortor. Integer eu turpis turpis. Phasellus eu placerat metus. Aenean ac massa consequat, consequat erat non, sollicitudin mi. Vivamus porttitor mattis accumsan.
Duis justo elit, finibus quis hendrerit at, ultricies quis nulla. Donec lobortis orci libero, eget dictum ipsum cursus ut. Phasellus vitae pellentesque risus. Mauris et dictum eros. Donec consectetur erat odio, nec semper nibh lacinia ac. Vestibulum rutrum laoreet rhoncus. Fusce dictum ut dui a fermentum. Donec hendrerit volutpat elit non ornare. Curabitur at neque semper, blandit lorem et, varius eros. Suspendisse nec turpis nec diam gravida pharetra.
Morbi turpis nulla, feugiat et egestas in, tempor sit amet ipsum. Nam ac arcu aliquet, congue ipsum ut, lacinia velit. Nulla neque nulla, vulputate in ex nec, laoreet gravida enim. Sed finibus turpis quis dapibus tincidunt. Phasellus elementum tincidunt neque sed porta. Etiam non finibus libero, vitae ullamcorper erat. Nullam lobortis eget diam eget vestibulum. In non dolor sed mauris finibus tempus non et justo. Nam convallis nec elit quis tempor. Vivamus ultricies pellentesque lectus nec commodo. Sed et molestie lacus, non gravida enim. Vivamus feugiat tempus ipsum ac eleifend. Nulla id mi tempor, tincidunt justo fermentum, convallis orci.
Fusce finibus placerat sapien at luctus. Mauris non velit diam. Vestibulum vel porta tellus, aliquet vulputate mi. Aenean a turpis ac urna gravida porta et sit amet ante. Phasellus vehicula feugiat leo ut faucibus. Curabitur porta, leo id auctor viverra, lorem nulla maximus turpis, eu laoreet leo risus id urna. Nullam finibus lectus ante, eget ultrices velit tempor ut. Maecenas quis tincidunt tortor. Nam eu facilisis libero. Morbi fermentum dolor sit amet lorem dictum aliquet. Curabitur porta nisl sed velit facilisis rhoncus. Duis eu eros quis metus blandit efficitur. Aenean venenatis est ante. Vestibulum quis laoreet dolor, sed bibendum metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras feugiat, dui vel lacinia scelerisque, lacus urna tempor quam, sit amet iaculis diam nulla et felis.
Curabitur ac accumsan arcu. Donec at euismod nisi, sit amet interdum sapien. Phasellus efficitur, felis ut condimentum accumsan, tortor ipsum convallis massa, ac iaculis quam metus quis nulla. Fusce vel turpis porta, tempor ex non, eleifend ante. Etiam nibh erat, interdum eget commodo nec, interdum eu orci. Vivamus eleifend nunc sed neque cursus pretium. Vestibulum non nisl eros. Fusce cursus tristique eros a finibus. Mauris vel massa tempor, vestibulum lorem in, bibendum urna. Donec cursus dolor nunc, sed lobortis tellus scelerisque ut. Nunc venenatis tincidunt neque eu gravida. Vestibulum quis ante eu velit interdum vulputate.
Vivamus sit amet mollis justo. Quisque sit amet molestie libero. Nam ut tempor dui, a commodo tortor. Quisque vehicula congue maximus. Proin dignissim ante nisl, eget ullamcorper lorem vestibulum sed. Vestibulum commodo porttitor vulputate. Sed augue ante, hendrerit et tincidunt maximus, pretium et tellus. Morbi et tortor eu nisl dignissim pulvinar. Morbi dignissim dictum metus vel lobortis. In sit amet tellus sit amet dui auctor tincidunt ac in nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce id metus lacinia, cursus ex in, gravida nibh. Ut mollis mi at urna gravida, in sagittis sem dictum. Nullam pretium dolor mauris, eget lobortis libero euismod a. Maecenas aliquet dolor dolor, cursus malesuada erat ornare ac.
Pellentesque ultrices semper tortor non fermentum. Fusce pellentesque fermentum justo eu placerat. Donec tincidunt dolor id nunc vehicula mattis. Suspendisse fermentum libero vel est sollicitudin, non interdum urna placerat. Cras dignissim nibh id tincidunt pellentesque. Quisque ac cursus enim. Phasellus pretium varius aliquam. Mauris arcu enim, posuere sit amet est eu, vestibulum euismod sapien. Etiam sed velit consequat, dictum turpis eu, vehicula orci. Morbi tincidunt sit amet erat in mattis. Curabitur ac nisi sit amet ipsum ultrices tempus vel et est. Vivamus ornare dolor vel ligula ultrices tempor.
Nunc id ultrices sapien. In hac habitasse platea dictumst. Quisque tempus cursus tellus, quis ultricies neque commodo ut. Integer bibendum orci vitae metus fringilla, quis tristique dui iaculis. Vestibulum eu velit et leo facilisis rhoncus sit amet at tortor. Morbi dignissim ante ut neque lacinia dictum. In vel risus at ex lobortis laoreet et nec leo. Mauris rutrum orci sollicitudin ex rhoncus ultrices.
Nunc dapibus pulvinar ex sed sollicitudin. Donec nec luctus tortor. Phasellus porta, ipsum sit amet sagittis sagittis, lectus sem vestibulum enim, et placerat velit diam sit amet leo. Curabitur turpis mi, eleifend eu porttitor mattis, aliquam sed ipsum. Pellentesque gravida condimentum sem, id laoreet erat vulputate in. Nulla facilisi. Mauris in eros vel sapien accumsan viverra eget sed est. Ut arcu orci, accumsan faucibus ipsum ut, accumsan luctus eros. Proin eget dui aliquam, dictum elit in, malesuada odio. Sed non arcu molestie, dignissim odio ut, sagittis neque. Duis sit amet quam massa. Mauris tempor, eros a placerat ornare, odio dui dapibus orci, quis feugiat libero neque posuere quam. Sed gravida velit purus, ut laoreet tortor mollis sit amet. Aliquam rutrum non lorem nec interdum. Pellentesque ornare blandit mattis.
Aliquam non commodo felis. Maecenas scelerisque elementum arcu, at tincidunt elit fringilla et. Nam ut felis dapibus elit accumsan sollicitudin id at ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque tincidunt mi interdum dui porta, ut tristique nibh auctor. Vestibulum in aliquam quam. Ut suscipit fringilla tellus, et elementum ligula finibus id. Curabitur auctor tincidunt finibus.
Donec sit amet orci pharetra, tempor orci in, placerat felis. Cras aliquam augue a lacus molestie, efficitur ultrices odio porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend arcu quis eros ultricies lobortis. Curabitur dignissim mi id feugiat finibus. In eu sodales sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Sed nec auctor velit. Vivamus pellentesque eget risus eu luctus. Etiam ac odio vitae quam semper vulputate quis non nulla. Pellentesque eget luctus turpis, quis volutpat tellus. Sed commodo accumsan magna ut dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut congue, magna id sagittis cursus, neque risus ultricies libero, et posuere est est ac mi. Donec quam urna, lobortis nec nibh convallis, auctor vehicula augue. Vestibulum turpis massa, placerat ut felis sit amet, maximus malesuada turpis. Integer scelerisque nisl sagittis, tempor quam vitae, feugiat tellus.
Phasellus efficitur, risus eget suscipit rhoncus, enim enim tempor elit, id tempor nibh metus vel elit. Suspendisse mattis lacinia sollicitudin. In urna dolor, eleifend a cursus ac, varius a lectus. Phasellus vestibulum, libero id congue venenatis, risus leo fringilla odio, ac dapibus augue enim vestibulum mauris. Nulla sit amet dignissim sem. Sed convallis eros non neque laoreet mollis. Sed at ex ligula. Vivamus luctus, urna nec fringilla faucibus, nisl est accumsan quam, eget gravida nisl odio at sem. In lacinia, diam ut faucibus pellentesque, mi ligula elementum est, et porta mauris tellus sit amet eros.
Donec luctus quis dui vel ornare. Vestibulum feugiat enim et semper tempor. Nullam dictum pellentesque orci. Aenean eleifend dolor at condimentum tincidunt. Sed molestie felis vel ipsum ullamcorper vulputate. Donec vel urna ac mi consectetur imperdiet eget eu arcu. Curabitur elit ante, sollicitudin vel convallis sed, molestie id justo. Vivamus lacinia risus eu mi suscipit gravida. Ut vitae ex pulvinar, rhoncus erat non, efficitur purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec est velit, ultricies a lacinia sed, faucibus ut erat. Nullam ut mi tincidunt, porttitor lacus sed, euismod velit. Nunc scelerisque lacus a lectus eleifend, tempus mollis urna rutrum.
Nam eget lobortis nisl. Pellentesque sed venenatis elit. In auctor volutpat posuere. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut cursus nunc augue, ac egestas tellus iaculis eu. Vivamus ultrices cursus mauris, ac bibendum eros accumsan eu. Aliquam id tincidunt purus. Sed sodales consectetur odio porttitor pulvinar. Donec sodales mattis sem, id elementum leo ornare at. Aenean blandit id magna a placerat.
Suspendisse quis tincidunt leo. Maecenas sapien massa, consequat at pharetra et, sodales vel velit. Ut convallis volutpat nibh id eleifend. Vestibulum molestie mauris ac ornare fringilla. Aliquam ipsum felis, fermentum eu lacinia nec, faucibus at nunc. Donec imperdiet, turpis non consectetur sodales, orci dolor ultricies magna, quis porttitor massa ligula ultrices magna. Vivamus auctor neque eros, nec dictum nulla vestibulum non. Pellentesque luctus, urna nec imperdiet maximus, nisi nibh suscipit ipsum, eget luctus leo ex quis lorem. Praesent in ex vitae urna laoreet imperdiet. Phasellus pulvinar ipsum vitae dui ultrices suscipit. Aenean est ipsum, ornare eget porta sit amet, tincidunt sed dui. Nam et urna porttitor, tempor magna ac, semper nisi. Vestibulum nisl purus, laoreet non ex a, ultricies finibus dolor.
Maecenas id sapien semper, luctus ante in, aliquet mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in odio magna. Aliquam pulvinar euismod ligula eu imperdiet. Integer condimentum nulla magna, feugiat ullamcorper ipsum dictum ac. Suspendisse id tempor neque, vitae blandit urna. Fusce eget tempus erat. Sed sit amet elit vitae nisl maximus dictum eget et nisl. In egestas at leo sed lacinia. Pellentesque at hendrerit neque, quis pharetra nunc. Donec dignissim erat in libero porttitor cursus.
Maecenas pellentesque tempus dapibus. Aenean sodales interdum dolor, sed iaculis erat luctus ac. Morbi interdum feugiat nisi, sed eleifend quam vehicula a. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed malesuada arcu sed lectus placerat, eget blandit purus luctus. Cras tristique ligula neque. Vestibulum finibus nunc ac ex ultricies, eget aliquam leo iaculis. Duis vestibulum imperdiet eros in vulputate. In ex odio, dictum aliquet dui at, elementum ultricies justo. Ut pulvinar condimentum dui, tincidunt faucibus nunc tempor at.
Quisque eleifend diam a lorem euismod, vitae dictum eros euismod. Pellentesque sed vehicula ante, ut laoreet libero. Suspendisse eget massa sollicitudin tortor viverra ultrices id vitae lorem. Donec sagittis nunc ut hendrerit lacinia. Donec elementum tellus efficitur felis cursus mollis. Etiam quis erat massa. Nullam eu dui felis. Suspendisse pulvinar leo augue, vel fermentum ex feugiat sed.
Morbi sagittis fermentum massa, vitae dictum orci. Aliquam fringilla, elit at condimentum congue, lacus libero porttitor urna, vel efficitur ante ante pulvinar risus. Aenean non enim nulla. Nullam eget elit ut lorem tincidunt malesuada. Curabitur dapibus eros molestie felis commodo tristique. Quisque non mi in nunc ultrices malesuada at ut dolor. Nullam metus mauris, aliquam id accumsan ac, efficitur ut felis. Ut purus lacus, consectetur quis dolor a, sagittis luctus est. Praesent tristique interdum sapien ut scelerisque. Proin nisi sem, luctus eu massa vitae, tincidunt tristique urna. Phasellus a nibh ut magna pretium convallis eget non justo. Ut id arcu sit amet nisi sollicitudin convallis sed sed dolor. Proin fermentum non ex et volutpat. Donec vitae erat rutrum, laoreet dui at, egestas arcu.
Etiam lobortis sodales mollis. Maecenas nec neque malesuada est ullamcorper venenatis eget ut lacus. Suspendisse maximus pretium tincidunt. Etiam a auctor mi. Morbi sollicitudin metus nec dolor porttitor, ac placerat arcu tempus. Sed turpis mi, cursus sit amet egestas ac, consequat sit amet nulla. Suspendisse dapibus malesuada blandit. Donec aliquet ligula urna, vel venenatis nibh facilisis sed.
Fusce volutpat ex et leo sagittis, eu posuere sapien scelerisque. Proin eget nisi sed metus accumsan suscipit in id leo. Quisque ac rutrum velit. Nulla id convallis libero. Duis euismod feugiat sodales. Aenean placerat, est nec convallis luctus, massa leo finibus nunc, in viverra dolor nunc at arcu. Cras lobortis rutrum vestibulum. Integer pellentesque placerat sapien non mattis. Maecenas in velit mi. Cras finibus in felis nec ullamcorper. Aenean ut est et felis elementum efficitur at vitae lacus. Maecenas aliquam dapibus massa, et semper lacus vulputate et.
In imperdiet convallis tellus ut semper. Quisque placerat eros id condimentum faucibus. Nulla et faucibus elit. Nunc tincidunt risus eget velit cursus semper. Etiam viverra nibh eget turpis gravida ultrices. Cras eget iaculis tortor, vehicula consequat est. Pellentesque blandit nisl id neque ultrices, in tempus quam facilisis.
Aenean feugiat felis sed ligula tincidunt suscipit a elementum dui. Phasellus laoreet lorem sit amet nisi varius, sit amet tincidunt augue dictum. Ut dictum ipsum finibus, pellentesque odio vel, accumsan odio. Proin porttitor risus lectus, commodo tristique diam commodo et. Integer ornare vel dui sit amet placerat. Quisque tellus purus, pharetra eget mi sit amet, faucibus imperdiet dui. Aliquam malesuada sapien eu enim laoreet, nec blandit lacus pulvinar. Ut in diam condimentum, iaculis mauris eget, venenatis ipsum. Donec finibus diam arcu, sit amet laoreet leo consectetur in. Duis erat turpis, consequat sed ornare sit amet, feugiat ac purus. Aliquam erat volutpat. Duis elit lacus, commodo id leo sed, congue consequat lectus.
Mauris facilisis et ligula id faucibus. Nunc non lobortis metus, tristique finibus tortor. Fusce interdum interdum felis elementum dignissim. Vivamus diam nisi, dictum dapibus consectetur ut, laoreet vel est. Vivamus posuere consectetur dui, in vehicula felis interdum nec. Pellentesque tincidunt magna turpis, a vehicula ante pellentesque sit amet. Nullam id feugiat nisl, eu blandit felis.
Suspendisse consequat enim at enim sagittis, sed feugiat tellus iaculis. Vestibulum volutpat dignissim porttitor. Vivamus at ante nec augue tempus laoreet. In volutpat risus at ipsum gravida tempus. Sed et vulputate dui. Praesent eget tempus mauris. Vivamus congue tellus at lacus sollicitudin luctus vitae quis est. Vivamus interdum nisi ut neque mattis, a suscipit lacus tempor. Vestibulum tellus orci, scelerisque sodales metus eu, cursus aliquam elit. Nunc porta fringilla turpis, ac varius arcu blandit ac. Nulla ornare ligula non tortor hendrerit dictum.
Aliquam lobortis, lectus sit amet blandit pulvinar, risus quam condimentum diam, convallis tristique lacus est non mi. Sed eu felis purus. Sed velit justo, posuere eget porttitor eget, vehicula vel neque. Suspendisse malesuada, nunc nec auctor cursus, lorem dolor rutrum dolor, ut scelerisque nibh nisi sed justo. Nullam ac orci non nisl varius porttitor. Vestibulum non lorem at mauris malesuada interdum vel quis dolor. Pellentesque porttitor erat vel sem venenatis feugiat eget vitae nisi. Sed tempus urna vitae egestas consequat. Curabitur vitae porttitor erat. In augue sem, sodales eget velit ut, pulvinar consectetur sem. Mauris rutrum erat vitae placerat egestas. Ut est odio, semper ut augue et, luctus sagittis risus. Curabitur ex est, ultrices nec neque consequat, dapibus malesuada magna. Aliquam erat volutpat. Vestibulum ipsum turpis, ultricies vitae tortor nec, malesuada sagittis orci.
Cras consequat mi odio. Proin vestibulum vestibulum efficitur. Ut et neque sapien. In sit amet ipsum in sapien molestie auctor ut eu diam. Aenean ornare erat ut felis faucibus, quis laoreet dui pretium. Praesent porttitor imperdiet mauris, eget consequat lectus lacinia a. Nam maximus eleifend velit, ut ultrices orci finibus nec. Donec id sapien ut erat fermentum vulputate in vel risus. Fusce neque ante, semper at euismod in, mollis sit amet neque. Fusce gravida pretium sapien, a eleifend nisi euismod sit amet. Vestibulum vulputate dapibus dolor non tempor. Proin eros velit, ornare vel ultrices non, faucibus at diam. Praesent pretium tempor arcu. Cras semper pellentesque commodo. Cras nec urna in tortor molestie varius in vitae odio. Ut finibus lacus ut est tristique suscipit.
Donec interdum magna urna, vel posuere nisi pellentesque sed. Nam quis mi sit amet quam laoreet eleifend. Aenean quis tellus non nulla auctor fringilla. Nunc felis arcu, volutpat quis porta vel, molestie at massa. Morbi vitae enim urna. Etiam euismod facilisis leo, vel dignissim nisi tempus sit amet. Aliquam aliquam cursus nibh, faucibus pharetra quam.
Maecenas luctus, velit ac malesuada egestas, leo nunc elementum neque, at porttitor ligula augue in odio. Sed tempus egestas dui, vitae varius metus volutpat id. Aliquam ornare, lacus posuere sollicitudin vehicula, felis diam consequat arcu, a laoreet nulla erat non nisl. Proin cursus ut tellus at condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin finibus enim et faucibus dignissim. Donec non ex vulputate, interdum orci ut, dignissim urna. Nulla rhoncus sollicitudin congue. Mauris semper arcu a massa malesuada scelerisque. Quisque ligula metus, condimentum nec interdum eget, efficitur in nunc.
Phasellus vel luctus dui, quis ornare orci. Etiam sollicitudin, neque at venenatis luctus, felis ante accumsan velit, nec molestie erat risus vel odio. In interdum maximus enim lobortis laoreet. Vivamus nisi odio, suscipit sit amet dui vel, consectetur mattis velit. Ut scelerisque sem eget tortor hendrerit, non bibendum enim rhoncus. Aenean id sem feugiat, eleifend leo nec, volutpat diam. Phasellus eget semper elit. Suspendisse vitae magna a ligula hendrerit malesuada. In magna velit, luctus at eros vitae, dignissim vehicula neque. In quis ex vel risus imperdiet feugiat eu vestibulum lorem. Nullam porttitor enim sed leo ornare, ac posuere tortor molestie. Fusce accumsan rutrum dictum. Aenean in erat neque. Maecenas rhoncus enim id nisl posuere, vel tristique neque vehicula. In efficitur, mauris non semper semper, justo mauris gravida ligula, ac bibendum sem lacus et diam. Nullam gravida sit amet diam et tristique.
Nulla urna justo, condimentum ut rhoncus vel, imperdiet sed mi. Aliquam venenatis, neque et facilisis placerat, dui felis lobortis diam, a pulvinar nibh velit fermentum tortor. Quisque nec commodo nibh, vitae varius elit. Cras sem dolor, fermentum ac dignissim eget, mattis in libero. Vivamus condimentum, diam et consectetur blandit, elit elit faucibus justo, condimentum rhoncus dui mi a ipsum. Aenean sit amet tellus leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam eu sodales ipsum. Etiam blandit nibh sit amet nunc interdum viverra. In hac habitasse platea dictumst. Sed eget ligula nec metus vestibulum elementum. Nulla in dolor eget risus laoreet fermentum. Aenean vitae accumsan erat, ac fermentum libero. Fusce efficitur tincidunt nibh, vel fringilla orci consectetur vitae. Ut eget porttitor mi.
</div>
</div>
</div>

fix a <p> tag at the top of my page while scrolling

While scrolling i'm trying to fix a p tag with my name on it on the top of the page but nothing seems to be working for me.
<div id="page-content-wrapper">
<p class="logo "><b>Mostafa</b> Masri</p>
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
<style>.logo {/*position: sticky;*/ top: 60px; /*left: 77px;*/ font size: 21px; text-transform: uppercase opacity: .8; margin: 0; position:absolute; top: 0; right:0; padding:19px;} </style>

Here's a possible solution using position: fixed.
.logo {
position: fixed;
top: 10px;
right: 10px;
font size: 21px;
text-transform: uppercase;
opacity: .8;
margin: 0;
padding: 19px;
}
<div id="page-content-wrapper">
<p class="logo ">
<b>Mostafa</b> Masri
</p>
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">≡</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at augue quis nulla iaculis tempus. Nunc ornare tempor justo ac pretium. Fusce lobortis tortor nunc, egestas aliquet sem congue eget. Nullam sed porttitor tortor, at suscipit nunc. Sed eget
diam sed lectus varius convallis. Sed interdum semper auctor. Nam vel nisi nisi. Etiam sem lacus, gravida sit amet odio sit amet, convallis pellentesque velit.</p>
<p>Aliquam pulvinar eu magna nec rhoncus. Nulla vel felis nec nisi faucibus varius sit amet in velit. Integer posuere eleifend metus, ac placerat erat elementum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum diam libero, rhoncus
at pretium a, ultrices eu mauris. Pellentesque blandit pretium mi eget lacinia. Nullam erat est, congue ultrices viverra eget, iaculis sit amet velit. Ut tempus lacinia ante, non venenatis leo. Fusce quis ipsum maximus, mattis felis at, feugiat lacus.
Morbi condimentum semper mi ac porttitor. Maecenas aliquam auctor mi, nec accumsan mauris congue a. Praesent rutrum porta sapien in scelerisque. Cras vehicula, tortor non hendrerit dictum, ex justo lacinia nulla, vitae dapibus nibh eros nec mauris.
Nulla sodales hendrerit odio et efficitur.</p>
<p>Fusce vel tempor elit, quis pharetra enim. Suspendisse potenti. Donec a arcu fermentum, venenatis tortor ac, mollis ante. Nullam vitae quam quis leo tempus iaculis id eget nibh. Maecenas consequat quis ante at lacinia. Donec auctor vel leo ut pretium.
Vestibulum hendrerit, nunc non scelerisque condimentum, dolor urna convallis sem, pulvinar vestibulum elit ante eget quam. Nunc pretium, lectus vel tincidunt lacinia, massa neque posuere felis, non tristique ipsum ante vitae dui. Mauris vitae nulla
quis mi congue eleifend non eu libero. Maecenas sit amet felis eu urna aliquam efficitur et congue nisi. Praesent sagittis nisi porttitor velit consequat, in feugiat quam ultrices. Cras sit amet enim ante. Fusce mi urna, volutpat semper justo ut,
feugiat mattis elit. Sed quis volutpat justo. Fusce pretium venenatis massa a aliquam.</p>
<p>Sed eu ultrices felis, et luctus metus. Donec justo felis, congue eget dui nec, commodo porttitor felis. Sed eu dui et risus condimentum rhoncus. Sed interdum libero ac risus convallis, sed placerat tortor interdum. Phasellus nec tristique eros, a ullamcorper
ex. Aliquam nulla nunc, placerat et urna vitae, eleifend condimentum arcu. Nullam diam arcu, dignissim eu lacus ac, porta pulvinar arcu. Sed ultrices luctus leo, ac blandit mi pellentesque a. Nunc ornare, arcu consectetur bibendum hendrerit, nulla
diam finibus est, non porta ligula erat vitae velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sodales arcu a lacus luctus, non mollis neque placerat. Praesent lacinia nisl id lectus feugiat condimentum.
Vivamus convallis aliquam est vel sagittis. Etiam ullamcorper consequat sapien, ornare porttitor massa luctus non. Ut purus tellus, maximus eu iaculis a, porta ac mi.</p>
<p>Praesent suscipit risus vitae magna aliquet, sed egestas ipsum eleifend. Suspendisse tincidunt dolor at est rhoncus mollis. In convallis iaculis diam id finibus. Integer et mi blandit, imperdiet arcu in, accumsan velit. Pellentesque vitae tristique
odio. Pellentesque facilisis dolor at suscipit ultrices. In hac habitasse platea dictumst. Sed molestie ante quis rutrum vestibulum. Phasellus interdum eros ut sem porta, non facilisis velit fringilla.</p>
</div>

How to clip div on scrolling page?

I'm trying to get this layout to work so that the content in the middle section gets clipped when it reaches the top (header) panel.
I do NOT want to fill the top panel with a background colour (to hide the content), because I want to place a background image on the page. I need scroll bars for the entire page, not just the content div because that makes it look like an iframe (ugly).
The code is the one below. If you scroll the page, the text goes into the top panel. I want it to get clipped/masked when it hits the top panel.
/* Reset body padding and margins */
body {
margin: 0;
padding: 0;
}
/* Make Header Sticky */
#header_container {
border: 1px solid #666;
height: 60px;
left: 0;
position: fixed;
width: 100%;
top: 0;
}
#header {
line-height: 60px;
margin: 0 auto;
width: 940px;
text-align: center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin: 0 auto;
overflow: auto;
padding: 80px 0;
width: 940px;
}
#content {}
/* Make Footer Sticky */
#footer_container {
background: #eee;
border: 1px solid #666;
bottom: 0;
height: 60px;
left: 0;
position: fixed;
width: 100%;
}
#footer {
line-height: 60px;
margin: 0 auto;
width: 940px;
text-align: center;
}
<body>
<html>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et
mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat
mi metus, a gravida quam.
<br /><br /> Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus
nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae
diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus.
<br /><br /> Aliquam lacinia lacus vel ante sagittis vestibulum fringilla sem accumsan. Phasellus eget dictum ipsum. Sed sed aliquam nisi. Nam vitae tempus tellus. Vestibulum convallis tellus diam, sed posuere lectus. Nulla diam velit, tristique
in dignissim quis, porta eu nulla. Quisque quis nisl urna, id adipiscing quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer justo nisi, sollicitudin vitae porttitor eu, elementum ut ante.
<br /><br /> Proin id odio nibh. Integer adipiscing fermentum tellus consectetur hendrerit. Sed porta, lectus sed dictum tempor, risus orci lacinia nulla, non rutrum neque tellus vitae velit. Quisque ut lectus eget nunc vulputate ultrices eget vitae
metus. Vestibulum ac ligula urna, placerat scelerisque sem. Vestibulum porta interdum orci, quis porttitor arcu dictum pulvinar. Maecenas quis quam augue, accumsan consectetur arcu. Etiam quis augue quam, at auctor diam. Donec varius venenatis diam
at pulvinar. Donec imperdiet elit id urna tincidunt commodo eget ut metus. Nam convallis malesuada dapibus. Aenean erat nunc, tempus id facilisis ac, dignissim nec urna.
<br /><br /> Vestibulum at neque id libero ornare iaculis sed in libero. Nunc erat lectus, dignissim id congue ut, ornare sit amet nunc. Sed dignissim, massa tempus rutrum fringilla, justo lectus rutrum neque, at posuere orci nunc quis lacus. Phasellus
semper turpis et arcu euismod eget pharetra nisi ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tempor, tellus sed interdum aliquet, dolor nibh hendrerit est, sed mattis tortor massa in
lectus. Vivamus eu ligula nibh, vel consectetur quam. Quisque in erat vitae est feugiat porttitor. Pellentesque dui nulla, pulvinar sed feugiat ut, laoreet a urna. Aenean id elit quis quam eleifend luctus sit amet at dolor. Duis eu tellus at libero
venenatis blandit. Mauris pharetra venenatis leo sed vehicula. Pellentesque rhoncus enim at nulla euismod tincidunt.
<br /><br /> Maecenas imperdiet nibh massa. In id eros in massa posuere blandit non sit amet lacus. Phasellus vitae lectus pretium nunc aliquam ullamcorper. Pellentesque quis urna ligula, nec placerat magna. Sed nisl turpis, porta at tincidunt eget,
vulputate sed magna. Nullam rutrum ipsum et lectus congue id rhoncus lectus bibendum. Vestibulum pretium velit id arcu rhoncus ac lobortis turpis tristique. Nullam viverra posuere leo sit amet dapibus. Fusce id imperdiet leo. Mauris et nisi diam.
Aenean lobortis vulputate massa, ut pellentesque mauris porta in. Fusce sollicitudin, massa consectetur ultrices varius, dolor ligula ullamcorper velit, non varius lorem urna vel diam.
<br /><br /> Morbi feugiat eleifend eros vel accumsan. Sed pellentesque vulputate libero eu mattis. Quisque sollicitudin aliquet ligula a molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pellentesque
lacinia varius. Etiam dictum hendrerit enim in euismod. Phasellus cursus odio vitae mauris mattis sed tincidunt nisi imperdiet. Duis sit amet neque diam. Aliquam aliquet molestie orci non vulputate. Maecenas non rhoncus eros. Integer auctor nisl
id elit posuere mollis. Nullam iaculis mattis justo sed accumsan.
<br /><br /> Proin ut ultricies odio. Duis consequat porta leo, in dictum urna facilisis id. Quisque facilisis massa a risus sodales accumsan. Maecenas at diam odio. Proin sem ligula, ullamcorper vel convallis at, vehicula ut augue. Pellentesque
euismod turpis eget metus fermentum adipiscing. Mauris nulla eros, imperdiet nec placerat eget, rutrum sed eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempor hendrerit porttitor. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Praesent faucibus ultricies scelerisque. Vivamus mi enim, tincidunt et lacinia vitae, aliquet in risus. Suspendisse sed felis magna, non facilisis dolor. Quisque rutrum, risus
quis sodales porta, sem magna ullamcorper odio, dictum aliquam felis sem et risus.
<br /><br /> Aenean lacinia quam vitae leo gravida in pellentesque eros congue. Praesent sit amet eleifend mi. Sed non justo erat. Donec eleifend velit vel quam mollis tempus. Curabitur et est turpis. Etiam consectetur velit eget erat euismod tempus.
Proin egestas venenatis velit ac volutpat. Sed id egestas mauris. Aliquam nulla mi, malesuada eu venenatis ac, fermentum ut eros. Ut nec consequat mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam
eu magna urna, vel imperdiet sapien. Vestibulum lacinia porttitor mi, at molestie enim aliquet non. Sed rutrum, risus vel aliquam varius, nunc lectus porttitor velit, a sollicitudin magna quam et lacus. Praesent consectetur hendrerit arcu non viverra.
<br /><br /> Nam sit amet faucibus augue. Proin arcu lacus, fermentum ac tincidunt vel, porttitor id libero. Sed at arcu at metus congue scelerisque. Maecenas quis erat magna, ac tempor erat. Curabitur mollis nisl in nunc fringilla eget interdum
ante ullamcorper. Etiam eget magna sit amet nunc tincidunt tempus vitae vitae ligula. Morbi iaculis nisl id libero scelerisque tempor. Morbi tincidunt, felis non congue molestie, metus enim venenatis nunc, ac sodales nibh massa eget orci. Morbi
mauris lorem, auctor nec porttitor eget, interdum at tortor. Sed malesuada nibh sed enim scelerisque id tristique neque rhoncus. Nulla vulputate purus a arcu egestas ultricies.
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>

You do not need to clip the content. Use the background attribute to hide the content.
/* Reset body padding and margins */
body { margin:0; padding:0; }
/* Make Header Sticky */
#header_container { border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; background-color: white; }
#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; }
#content{}
/* Make Footer Sticky */
#footer_container { background:#eee; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%; }
#footer { line-height:60px; margin:0 auto; width:940px; text-align:center; }
<body>
<html>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat mi metus, a gravida quam.
<br /><br />
Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus.
<br /><br />
Aliquam lacinia lacus vel ante sagittis vestibulum fringilla sem accumsan. Phasellus eget dictum ipsum. Sed sed aliquam nisi. Nam vitae tempus tellus. Vestibulum convallis tellus diam, sed posuere lectus. Nulla diam velit, tristique in dignissim quis, porta eu nulla. Quisque quis nisl urna, id adipiscing quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer justo nisi, sollicitudin vitae porttitor eu, elementum ut ante.
<br /><br />
Proin id odio nibh. Integer adipiscing fermentum tellus consectetur hendrerit. Sed porta, lectus sed dictum tempor, risus orci lacinia nulla, non rutrum neque tellus vitae velit. Quisque ut lectus eget nunc vulputate ultrices eget vitae metus. Vestibulum ac ligula urna, placerat scelerisque sem. Vestibulum porta interdum orci, quis porttitor arcu dictum pulvinar. Maecenas quis quam augue, accumsan consectetur arcu. Etiam quis augue quam, at auctor diam. Donec varius venenatis diam at pulvinar. Donec imperdiet elit id urna tincidunt commodo eget ut metus. Nam convallis malesuada dapibus. Aenean erat nunc, tempus id facilisis ac, dignissim nec urna.
<br /><br />
Vestibulum at neque id libero ornare iaculis sed in libero. Nunc erat lectus, dignissim id congue ut, ornare sit amet nunc. Sed dignissim, massa tempus rutrum fringilla, justo lectus rutrum neque, at posuere orci nunc quis lacus. Phasellus semper turpis et arcu euismod eget pharetra nisi ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tempor, tellus sed interdum aliquet, dolor nibh hendrerit est, sed mattis tortor massa in lectus. Vivamus eu ligula nibh, vel consectetur quam. Quisque in erat vitae est feugiat porttitor. Pellentesque dui nulla, pulvinar sed feugiat ut, laoreet a urna. Aenean id elit quis quam eleifend luctus sit amet at dolor. Duis eu tellus at libero venenatis blandit. Mauris pharetra venenatis leo sed vehicula. Pellentesque rhoncus enim at nulla euismod tincidunt.
<br /><br />
Maecenas imperdiet nibh massa. In id eros in massa posuere blandit non sit amet lacus. Phasellus vitae lectus pretium nunc aliquam ullamcorper. Pellentesque quis urna ligula, nec placerat magna. Sed nisl turpis, porta at tincidunt eget, vulputate sed magna. Nullam rutrum ipsum et lectus congue id rhoncus lectus bibendum. Vestibulum pretium velit id arcu rhoncus ac lobortis turpis tristique. Nullam viverra posuere leo sit amet dapibus. Fusce id imperdiet leo. Mauris et nisi diam. Aenean lobortis vulputate massa, ut pellentesque mauris porta in. Fusce sollicitudin, massa consectetur ultrices varius, dolor ligula ullamcorper velit, non varius lorem urna vel diam.
<br /><br />
Morbi feugiat eleifend eros vel accumsan. Sed pellentesque vulputate libero eu mattis. Quisque sollicitudin aliquet ligula a molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pellentesque lacinia varius. Etiam dictum hendrerit enim in euismod. Phasellus cursus odio vitae mauris mattis sed tincidunt nisi imperdiet. Duis sit amet neque diam. Aliquam aliquet molestie orci non vulputate. Maecenas non rhoncus eros. Integer auctor nisl id elit posuere mollis. Nullam iaculis mattis justo sed accumsan.
<br /><br />
Proin ut ultricies odio. Duis consequat porta leo, in dictum urna facilisis id. Quisque facilisis massa a risus sodales accumsan. Maecenas at diam odio. Proin sem ligula, ullamcorper vel convallis at, vehicula ut augue. Pellentesque euismod turpis eget metus fermentum adipiscing. Mauris nulla eros, imperdiet nec placerat eget, rutrum sed eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempor hendrerit porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Praesent faucibus ultricies scelerisque. Vivamus mi enim, tincidunt et lacinia vitae, aliquet in risus. Suspendisse sed felis magna, non facilisis dolor. Quisque rutrum, risus quis sodales porta, sem magna ullamcorper odio, dictum aliquam felis sem et risus.
<br /><br />
Aenean lacinia quam vitae leo gravida in pellentesque eros congue. Praesent sit amet eleifend mi. Sed non justo erat. Donec eleifend velit vel quam mollis tempus. Curabitur et est turpis. Etiam consectetur velit eget erat euismod tempus. Proin egestas venenatis velit ac volutpat. Sed id egestas mauris. Aliquam nulla mi, malesuada eu venenatis ac, fermentum ut eros. Ut nec consequat mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam eu magna urna, vel imperdiet sapien. Vestibulum lacinia porttitor mi, at molestie enim aliquet non. Sed rutrum, risus vel aliquam varius, nunc lectus porttitor velit, a sollicitudin magna quam et lacus. Praesent consectetur hendrerit arcu non viverra.
<br /><br />
Nam sit amet faucibus augue. Proin arcu lacus, fermentum ac tincidunt vel, porttitor id libero. Sed at arcu at metus congue scelerisque. Maecenas quis erat magna, ac tempor erat. Curabitur mollis nisl in nunc fringilla eget interdum ante ullamcorper. Etiam eget magna sit amet nunc tincidunt tempus vitae vitae ligula. Morbi iaculis nisl id libero scelerisque tempor. Morbi tincidunt, felis non congue molestie, metus enim venenatis nunc, ac sodales nibh massa eget orci. Morbi mauris lorem, auctor nec porttitor eget, interdum at tortor. Sed malesuada nibh sed enim scelerisque id tristique neque rhoncus. Nulla vulputate purus a arcu egestas ultricies.
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
I added background-color: white; to your css, and the text is now hidden behind the white background of the header element.
You can also clip the text by fixing the div size and setting some other css attributes such as overflow-y: hidden, that will cause anything that scrolls out of the center div to be hidden from view.

Flexbox optional nav that does not scroll [duplicate]

This question already has an answer here:
Heights rendering differently in Chrome and Firefox [duplicate]
(1 answer)
Closed 6 years ago.
I am trying to create a page that has an optional banner at the top, and a scrollable master view, with a detail.
Here is a plunk:
https://plnkr.co/edit/RxVw5RJVhQInhXV0AtWn?p=preview
This works great in Chrome and Safari. However in Firefox the banner is scrollable, and you have to scroll the banner off the screen to see the remaining content in the master view.
I could use fixed heights and offsets to get this to work, but I don't want to do that as my banner is optional and may not be present in some situations.
Is this a bug in firefox w/ flexbox? Something I am doing wrong? Thanks in advance for any help.
body {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
html {
height: 100%;
}
.container {
display: flex;
flex-direction: row;
height: 100%;
}
.banner {
flex: 1 1 auto;
background-color: #555;
color: #fff;
padding: 10px 0px;
}
.detail {
flex: 4 1 auto;
position: relative;
order: 2;
background-color: blue;
}
.master {
order: 1;
display: flex;
flex-direction: column;
width: 200px;
flex:1 1 auto;
background-color: yellow;
}
.master-items {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
<div class="banner">
<div class="banner-text">
Optional banner at the top of my page
</div>
</div>
<div class="container">
<div class="master">
<div class="master-items">
orem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis nulla quis dapibus tincidunt. Praesent porta lectus in blandit fermentum. Curabitur tristique diam eu augue ultricies accumsan. Vestibulum hendrerit velit mauris, quis tincidunt ligula faucibus at. Nunc auctor lacus ante, a semper lorem blandit non. Proin tortor nunc, ultrices sit amet faucibus a, tristique vitae nunc. Vestibulum vitae dignissim tortor. Nullam hendrerit odio non neque rutrum, vitae egestas purus imperdiet. Morbi fermentum velit et elit commodo ultricies.
Integer ornare orci diam, vitae scelerisque erat feugiat sit amet. Etiam ut rhoncus diam. Ut ornare id ipsum quis gravida. Duis dignissim, dolor et laoreet bibendum, tellus odio aliquet erat, et molestie purus dolor vel diam. Aliquam erat volutpat. Sed bibendum et augue non pulvinar. Donec a tellus sed massa facilisis varius eu id neque. In tincidunt, arcu quis laoreet vulputate, lectus enim elementum velit, malesuada tempus justo neque sed justo. Fusce pulvinar, massa scelerisque hendrerit pharetra, nisi enim interdum sapien, id tempus dui libero ut arcu. Integer est magna, luctus a fermentum sit amet, facilisis at ante. Vestibulum ultricies urna ipsum, eu malesuada urna porta vitae. Mauris tincidunt molestie posuere. Nullam dictum urna maximus lobortis varius. Curabitur ut lorem at augue viverra tincidunt at at massa. Morbi venenatis dolor id nisi imperdiet, eu mollis ante aliquet.
Donec luctus ex vitae euismod egestas. In hac habitasse platea dictumst. Nullam non ligula tempor, dignissim ante sed, volutpat quam. Donec enim erat, interdum vitae efficitur vitae, vulputate eget libero. Phasellus ut lobortis nunc, a mollis dolor. Quisque a quam ligula. Sed eu gravida mi, interdum ullamcorper nulla. Ut eu lectus in enim dignissim ornare. Ut sit amet elit a magna pharetra laoreet eget id nibh. Ut rhoncus, urna fringilla porttitor euismod, urna dui viverra leo, at laoreet ipsum ipsum id risus. Aliquam in tellus sed lorem egestas posuere. Praesent iaculis commodo tortor ac euismod. Integer cursus dui vitae interdum vehicula.
Nam malesuada orci purus, vel placerat urna maximus ac. Fusce malesuada dolor nec arcu aliquet convallis. In lobortis at dolor id bibendum. Mauris semper, sem eu pretium ultricies, massa quam tempor dui, id consequat tellus arcu id nibh. Morbi ligula turpis, rutrum pulvinar finibus non, bibendum eu felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum justo arcu, gravida et turpis a, elementum mollis orci. Maecenas sagittis luctus massa at semper. Cras interdum efficitur nibh ac maximus. Pellentesque porta lacus eu lectus laoreet, quis luctus velit sagittis. Etiam condimentum sapien id metus efficitur gravida. Curabitur fermentum non justo a varius.
Ut nisi nisi, convallis in pellentesque feugiat, finibus a nisi. Proin ac lorem nec libero interdum auctor ut eu ex. Quisque felis neque, molestie id bibendum cursus, sollicitudin nec orci. Phasellus aliquet auctor massa, ut euismod tellus tincidunt vestibulum. Suspendisse pellentesque mattis sagittis. In hac habitasse platea dictumst. Proin faucibus posuere neque ullamcorper ultricies. Cras iaculis diam non mauris varius blandit. Praesent erat quam, tempor ac vehicula nec, feugiat a risus. Praesent viverra ornare faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Nunc nec arcu ultrices, porta urna non, lacinia lacus. Nam efficitur sem non odio rhoncus consectetur. Praesent non molestie ligula. Sed luctus sodales diam, vel hendrerit ipsum tristique sed. Morbi eu vehicula urna, et gravida diam. Maecenas in iaculis ante, eget faucibus arcu. Etiam vehicula lectus elit, eu tempus erat semper eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vestibulum eleifend sapien nec consectetur. Nunc ut mauris accumsan diam fermentum vulputate quis et nibh.
Duis porttitor nisl a lacus scelerisque, quis rutrum libero porttitor. Nunc blandit finibus ante eget pellentesque. Sed tempor leo ut mi sodales aliquam. Nunc sagittis nibh tincidunt velit mattis blandit. Mauris viverra mi massa, non pellentesque libero rutrum nec. Morbi malesuada nisi lectus, at placerat dui convallis ac. Donec risus nisi, rhoncus ac venenatis sed, finibus sed nibh.
Praesent molestie molestie arcu. Pellentesque sit amet augue tristique, pharetra nisi nec, tempor elit. Vestibulum a dictum eros. Integer eros neque, eleifend vitae tortor a, volutpat vestibulum leo. Proin tempor nisi et metus malesuada, non condimentum orci tincidunt. Quisque accumsan metus vitae sollicitudin efficitur. Duis vulputate volutpat dolor eu sollicitudin. Vivamus eu nisl bibendum, lobortis purus quis, sollicitudin quam. Nulla id odio luctus, varius ex ullamcorper, pulvinar lacus. Nunc sollicitudin cursus purus, eget consequat lorem maximus sed. Phasellus gravida, sem vel bibendum lacinia, felis nibh faucibus lectus, eu pretium lorem elit in augue. In a massa magna. Nunc bibendum ultrices arcu in bibendum. Sed elit lectus, pulvinar sed euismod et, tincidunt ut justo.
Praesent viverra bibendum ipsum ac dapibus. Pellentesque malesuada interdum ex eu sagittis. Vestibulum pellentesque urna vitae justo tincidunt, non mattis purus maximus. In nec purus ac velit tempus tristique ac non nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac auctor lacus. Etiam vel pellentesque nunc. Nam odio orci, elementum sit amet metus eu, sodales laoreet erat. Integer nec quam ac ipsum mattis aliquam ut id nulla. Vestibulum eu erat hendrerit, iaculis est ac, ultricies mi. Nunc imperdiet non risus vitae fringilla. Vestibulum suscipit nec mauris bibendum viverra. Curabitur libero nibh, vulputate a aliquet sed, ultricies in nunc. Integer ut mollis dui. Ut ipsum lorem, luctus vitae dictum interdum, pretium vel nisl.
</div>
</div>
<div class="detail">
</div>
</div>

Don't flex the nav, just let it be sized by its contents:
.banner {
flex: auto;
}
Make the container fill the remaining space left by the banner (or all available space if there is no banner):
.container {
flex: 1;
overflow: auto;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
html {
height: 100%;
}
.container {
display: flex;
flex-direction: row;
flex: 1;
overflow: auto;
}
.banner {
background-color: #555;
color: #fff;
padding: 10px 0px;
}
.detail {
flex: 4 1 auto;
position: relative;
order: 2;
background-color: blue;
}
.master {
order: 1;
display: flex;
flex-direction: column;
width: 200px;
flex: 1 1 auto;
background-color: yellow;
}
.master-items {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
<div class="banner">
<div class="banner-text">
Optional banner at the top of my page
</div>
</div>
<div class="container">
<div class="master">
<div class="master-items">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis nulla quis dapibus tincidunt. Praesent porta lectus in blandit fermentum. Curabitur tristique diam eu augue ultricies accumsan. Vestibulum hendrerit velit mauris, quis tincidunt ligula faucibus at. Nunc auctor lacus ante, a semper lorem blandit non. Proin tortor nunc, ultrices sit amet faucibus a, tristique vitae nunc. Vestibulum vitae dignissim tortor. Nullam hendrerit odio non neque rutrum, vitae egestas purus imperdiet. Morbi fermentum velit et elit commodo ultricies. Integer ornare orci diam, vitae scelerisque erat feugiat sit amet. Etiam ut rhoncus diam. Ut ornare id ipsum quis gravida. Duis dignissim, dolor et laoreet bibendum, tellus odio aliquet erat, et molestie purus dolor vel diam. Aliquam erat volutpat. Sed bibendum et augue non pulvinar. Donec a tellus sed massa facilisis varius eu id neque. In tincidunt, arcu quis laoreet vulputate, lectus enim elementum velit, malesuada tempus justo neque sed justo. Fusce pulvinar, massa scelerisque hendrerit pharetra, nisi enim interdum sapien, id tempus dui libero ut arcu. Integer est magna, luctus a fermentum sit amet, facilisis at ante. Vestibulum ultricies urna ipsum, eu malesuada urna porta vitae. Mauris tincidunt molestie posuere. Nullam dictum urna maximus lobortis varius. Curabitur ut lorem at augue viverra tincidunt at at massa. Morbi venenatis dolor id nisi imperdiet, eu mollis ante aliquet. Donec luctus ex vitae euismod egestas. In hac habitasse platea dictumst. Nullam non ligula tempor, dignissim ante sed, volutpat quam. Donec enim erat, interdum vitae efficitur vitae, vulputate eget libero. Phasellus ut lobortis nunc, a mollis dolor. Quisque a quam ligula. Sed eu gravida mi, interdum ullamcorper nulla. Ut eu lectus in enim dignissim ornare. Ut sit amet elit a magna pharetra laoreet eget id nibh. Ut rhoncus, urna fringilla porttitor euismod, urna dui viverra leo, at laoreet ipsum ipsum id risus. Aliquam in tellus sed lorem egestas posuere. Praesent iaculis commodo tortor ac euismod. Integer cursus dui vitae interdum vehicula. Nam malesuada orci purus, vel placerat urna maximus ac. Fusce malesuada dolor nec arcu aliquet convallis. In lobortis at dolor id bibendum. Mauris semper, sem eu pretium ultricies, massa quam tempor dui, id consequat tellus arcu id nibh. Morbi ligula turpis, rutrum pulvinar finibus non, bibendum eu felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum justo arcu, gravida et turpis a, elementum mollis orci. Maecenas sagittis luctus massa at semper. Cras interdum efficitur nibh ac maximus. Pellentesque porta lacus eu lectus laoreet, quis luctus velit sagittis. Etiam condimentum sapien id metus efficitur gravida. Curabitur fermentum non justo a varius. Ut nisi nisi, convallis in pellentesque feugiat, finibus a nisi. Proin ac lorem nec libero interdum auctor ut eu ex. Quisque felis neque, molestie id bibendum cursus, sollicitudin nec orci. Phasellus aliquet auctor massa, ut euismod tellus tincidunt vestibulum. Suspendisse pellentesque mattis sagittis. In hac habitasse platea dictumst. Proin faucibus posuere neque ullamcorper ultricies. Cras iaculis diam non mauris varius blandit. Praesent erat quam, tempor ac vehicula nec, feugiat a risus. Praesent viverra ornare faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nec arcu ultrices, porta urna non, lacinia lacus. Nam efficitur sem non odio rhoncus consectetur. Praesent non molestie ligula. Sed luctus sodales diam, vel hendrerit ipsum tristique sed. Morbi eu vehicula urna, et gravida diam. Maecenas in iaculis ante, eget faucibus arcu. Etiam vehicula lectus elit, eu tempus erat semper eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vestibulum eleifend sapien nec consectetur. Nunc ut mauris accumsan diam fermentum vulputate quis et nibh. Duis porttitor nisl a lacus scelerisque, quis rutrum libero porttitor. Nunc blandit finibus ante eget pellentesque. Sed tempor leo ut mi sodales aliquam. Nunc sagittis nibh tincidunt velit mattis blandit. Mauris viverra mi massa, non pellentesque libero rutrum nec. Morbi malesuada nisi lectus, at placerat dui convallis ac. Donec risus nisi, rhoncus ac venenatis sed, finibus sed nibh. Praesent molestie molestie arcu. Pellentesque sit amet augue tristique, pharetra nisi nec, tempor elit. Vestibulum a dictum eros. Integer eros neque, eleifend vitae tortor a, volutpat vestibulum leo. Proin tempor nisi et metus malesuada, non condimentum orci tincidunt. Quisque accumsan metus vitae sollicitudin efficitur. Duis vulputate volutpat dolor eu sollicitudin. Vivamus eu nisl bibendum, lobortis purus quis, sollicitudin quam. Nulla id odio luctus, varius ex ullamcorper, pulvinar lacus. Nunc sollicitudin cursus purus, eget consequat lorem maximus sed. Phasellus gravida, sem vel bibendum lacinia, felis nibh faucibus lectus, eu pretium lorem elit in augue. In a massa magna. Nunc bibendum ultrices arcu in bibendum. Sed elit lectus, pulvinar sed euismod et, tincidunt ut justo. Praesent viverra bibendum ipsum ac dapibus. Pellentesque malesuada interdum ex eu sagittis. Vestibulum pellentesque urna vitae justo tincidunt, non mattis purus maximus. In nec purus ac velit tempus tristique ac non nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac auctor lacus. Etiam vel pellentesque nunc. Nam odio orci, elementum sit amet metus eu, sodales laoreet erat. Integer nec quam ac ipsum mattis aliquam ut id nulla. Vestibulum eu erat hendrerit, iaculis est ac, ultricies mi. Nunc imperdiet non risus vitae fringilla. Vestibulum suscipit nec mauris bibendum viverra. Curabitur libero nibh, vulputate a aliquet sed, ultricies in nunc. Integer ut mollis dui. Ut ipsum lorem, luctus vitae dictum interdum, pretium vel nisl.
</div>
</div>
<div class="detail"></div>
</div>

how to make middle div inside scrollable div stay on top when scrolling

I have a header (div), menu (div) & content (div) inside a container (scrollable div).
I'd like to set menu to stay at top of container only when scrolling down inside of the container (scrollable div)!!!.
Here is my code:
<div id="wrapper">
<div id="LangBar"/>
<div id="LeftFloat"/>
<div class="main" id="sb">**this is the CONTAINER (SCROLLABLE DIV)**
<div id="header">**this is the HEADER (DIV)**</div>
<div id="menu">**this is the MENU (DIV)**</div>
<div class="section">**this is the CONTENT (DIV)**</div>
<div id="footer"/>
</div>
<div id="RightFloat"/>
</div>
HERE IS MY JSFIDDLE

Please see my code: http://jsfiddle.net/aisinvon/4pEBm/5
Because you need menu stick only when scroll down, we can use jquery to do it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
.section {
height:1000px;
background: #ccc;
}
.main{
height: 500px;
overflow: scroll;
}
.fixed {
position:fixed;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="LangBar" />
<div id="LeftFloat" />
<div class="main" id="sb">**this is the CONTAINER (SCROLLABLE DIV)**
<div id="header">**this is the HEADER (DIV)**</div>
<div id="menu">**this is the MENU (DIV)**</div>
<div class="section">**this is the CONTENT (DIV)**</div>
<div id="footer" />
</div>
<div id="RightFloat" />
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $menu = $('#menu'),
menuTop = $menu.offset().top;
$('#sb').scroll(function() {
var scrollTop = $('#sb').scrollTop();
if (scrollTop > menuTop) {
$menu.addClass('fixed');
} else {
$menu.removeClass('fixed');
}
});
});
</script>
</div>
</body>
</html>

Absolute position the 3 elements and set overflow:auto for the middle one like in this fiddle. http://jsfiddle.net/majinnaibu/p47mU/
CSS
html, body, #wrapper{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#wrapper{
background: #0f0;
}
#header{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background: rgba(255,0,0,0.5);
}
#footer{
position: absolute;
height: 50px;
bottom: 0px;
left: 0px;
right: 0px;
background: rgba(0,0,255,0.5);
}
#content{
position: absolute;
overflow: auto;
top: 50px;
bottom: 50px;
}
HTML
<div id="wrapper">
<div id="header">
Header Content
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis neque ut turpis volutpat pretium. Donec luctus vel lectus eget condimentum. Aliquam interdum dignissim neque, eu pulvinar erat porta sit amet. Nam urna lectus, rhoncus eu ante ac, lobortis pretium velit. Phasellus vestibulum quam in elit dapibus imperdiet. Integer lobortis nec dolor sit amet accumsan. Sed nec faucibus mi, scelerisque mollis erat. Vivamus eu sapien ornare, posuere mi nec, mollis metus. Aenean convallis est ipsum, eget dignissim leo tincidunt eget. Praesent malesuada dolor vel lacus malesuada, at fermentum nunc eleifend. Integer est metus, dapibus sit amet enim in, posuere aliquam lorem. Vivamus convallis neque at odio convallis, ut sodales erat ultricies. Quisque et enim ac enim imperdiet consectetur. Etiam eget lectus nec lorem congue dictum. Nulla facilisi.
Quisque ligula dolor, pharetra et ante nec, blandit interdum risus. Mauris ultrices malesuada sem, a luctus diam auctor in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque purus magna, laoreet id malesuada non, blandit sed diam. Vivamus blandit faucibus mattis. Aliquam semper faucibus erat eu mollis. Donec eleifend leo lacus, sed aliquet nisi consequat ac.
Morbi dictum pharetra feugiat. In nec turpis dolor. Mauris consectetur hendrerit scelerisque. Aenean eleifend dui ac augue varius porttitor at a leo. Fusce semper mollis vulputate. Praesent libero enim, congue eget tellus vitae, mattis tempor turpis. Fusce cursus ligula quam, eget iaculis leo ullamcorper eget. Nam laoreet quam pulvinar, egestas justo id, cursus eros. Pellentesque congue porttitor pretium.
Suspendisse mattis sapien sed magna tempus ultrices. Nullam porta sagittis nulla ut venenatis. Nulla faucibus elementum elementum. Integer sed consectetur elit, quis elementum dolor. Donec dapibus aliquam orci eu pretium. Aliquam vel fermentum nunc. Duis augue mauris, semper at neque ac, aliquet mattis augue. Suspendisse pulvinar vehicula semper. Aenean purus orci, pharetra vel sollicitudin quis, tincidunt ac dolor.
Duis nibh tellus, iaculis vel venenatis sed, condimentum ac est. Sed ac imperdiet neque. Phasellus et euismod lorem. Nunc hendrerit orci mattis, tincidunt quam vel, varius mauris. Phasellus venenatis malesuada congue. Nam ut nunc eros. Nulla facilisi. Pellentesque facilisis massa a tortor imperdiet ullamcorper eget convallis nisl. Suspendisse potenti. Nam a congue est. Praesent id ante dui. In hac habitasse platea dictumst. Sed eget metus sit amet arcu pellentesque molestie ac eget mauris. Nullam adipiscing odio at interdum porttitor. Proin magna mi, facilisis ac rhoncus ac, gravida ut lacus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis neque ut turpis volutpat pretium. Donec luctus vel lectus eget condimentum. Aliquam interdum dignissim neque, eu pulvinar erat porta sit amet. Nam urna lectus, rhoncus eu ante ac, lobortis pretium velit. Phasellus vestibulum quam in elit dapibus imperdiet. Integer lobortis nec dolor sit amet accumsan. Sed nec faucibus mi, scelerisque mollis erat. Vivamus eu sapien ornare, posuere mi nec, mollis metus. Aenean convallis est ipsum, eget dignissim leo tincidunt eget. Praesent malesuada dolor vel lacus malesuada, at fermentum nunc eleifend. Integer est metus, dapibus sit amet enim in, posuere aliquam lorem. Vivamus convallis neque at odio convallis, ut sodales erat ultricies. Quisque et enim ac enim imperdiet consectetur. Etiam eget lectus nec lorem congue dictum. Nulla facilisi.
Quisque ligula dolor, pharetra et ante nec, blandit interdum risus. Mauris ultrices malesuada sem, a luctus diam auctor in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque purus magna, laoreet id malesuada non, blandit sed diam. Vivamus blandit faucibus mattis. Aliquam semper faucibus erat eu mollis. Donec eleifend leo lacus, sed aliquet nisi consequat ac.
Morbi dictum pharetra feugiat. In nec turpis dolor. Mauris consectetur hendrerit scelerisque. Aenean eleifend dui ac augue varius porttitor at a leo. Fusce semper mollis vulputate. Praesent libero enim, congue eget tellus vitae, mattis tempor turpis. Fusce cursus ligula quam, eget iaculis leo ullamcorper eget. Nam laoreet quam pulvinar, egestas justo id, cursus eros. Pellentesque congue porttitor pretium.
Suspendisse mattis sapien sed magna tempus ultrices. Nullam porta sagittis nulla ut venenatis. Nulla faucibus elementum elementum. Integer sed consectetur elit, quis elementum dolor. Donec dapibus aliquam orci eu pretium. Aliquam vel fermentum nunc. Duis augue mauris, semper at neque ac, aliquet mattis augue. Suspendisse pulvinar vehicula semper. Aenean purus orci, pharetra vel sollicitudin quis, tincidunt ac dolor.
Duis nibh tellus, iaculis vel venenatis sed, condimentum ac est. Sed ac imperdiet neque. Phasellus et euismod lorem. Nunc hendrerit orci mattis, tincidunt quam vel, varius mauris. Phasellus venenatis malesuada congue. Nam ut nunc eros. Nulla facilisi. Pellentesque facilisis massa a tortor imperdiet ullamcorper eget convallis nisl. Suspendisse potenti. Nam a congue est. Praesent id ante dui. In hac habitasse platea dictumst. Sed eget metus sit amet arcu pellentesque molestie ac eget mauris. Nullam adipiscing odio at interdum porttitor. Proin magna mi, facilisis ac rhoncus ac, gravida ut lacus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis neque ut turpis volutpat pretium. Donec luctus vel lectus eget condimentum. Aliquam interdum dignissim neque, eu pulvinar erat porta sit amet. Nam urna lectus, rhoncus eu ante ac, lobortis pretium velit. Phasellus vestibulum quam in elit dapibus imperdiet. Integer lobortis nec dolor sit amet accumsan. Sed nec faucibus mi, scelerisque mollis erat. Vivamus eu sapien ornare, posuere mi nec, mollis metus. Aenean convallis est ipsum, eget dignissim leo tincidunt eget. Praesent malesuada dolor vel lacus malesuada, at fermentum nunc eleifend. Integer est metus, dapibus sit amet enim in, posuere aliquam lorem. Vivamus convallis neque at odio convallis, ut sodales erat ultricies. Quisque et enim ac enim imperdiet consectetur. Etiam eget lectus nec lorem congue dictum. Nulla facilisi.
Quisque ligula dolor, pharetra et ante nec, blandit interdum risus. Mauris ultrices malesuada sem, a luctus diam auctor in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque purus magna, laoreet id malesuada non, blandit sed diam. Vivamus blandit faucibus mattis. Aliquam semper faucibus erat eu mollis. Donec eleifend leo lacus, sed aliquet nisi consequat ac.
Morbi dictum pharetra feugiat. In nec turpis dolor. Mauris consectetur hendrerit scelerisque. Aenean eleifend dui ac augue varius porttitor at a leo. Fusce semper mollis vulputate. Praesent libero enim, congue eget tellus vitae, mattis tempor turpis. Fusce cursus ligula quam, eget iaculis leo ullamcorper eget. Nam laoreet quam pulvinar, egestas justo id, cursus eros. Pellentesque congue porttitor pretium.
Suspendisse mattis sapien sed magna tempus ultrices. Nullam porta sagittis nulla ut venenatis. Nulla faucibus elementum elementum. Integer sed consectetur elit, quis elementum dolor. Donec dapibus aliquam orci eu pretium. Aliquam vel fermentum nunc. Duis augue mauris, semper at neque ac, aliquet mattis augue. Suspendisse pulvinar vehicula semper. Aenean purus orci, pharetra vel sollicitudin quis, tincidunt ac dolor.
Duis nibh tellus, iaculis vel venenatis sed, condimentum ac est. Sed ac imperdiet neque. Phasellus et euismod lorem. Nunc hendrerit orci mattis, tincidunt quam vel, varius mauris. Phasellus venenatis malesuada congue. Nam ut nunc eros. Nulla facilisi. Pellentesque facilisis massa a tortor imperdiet ullamcorper eget convallis nisl. Suspendisse potenti. Nam a congue est. Praesent id ante dui. In hac habitasse platea dictumst. Sed eget metus sit amet arcu pellentesque molestie ac eget mauris. Nullam adipiscing odio at interdum porttitor. Proin magna mi, facilisis ac rhoncus ac, gravida ut lacus.
</div>
<div id="footer">
Footer Content
</div>
</div>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008