Bootstrap 3 fixed footer css causing scrolling bug with Internet Explorer - html

Jsfiddle: https://jsfiddle.net/2oev7nLa/
I have a page with fixed navbar and footer in place. The site works as intended in Chrome and Firefox but the scrolling bar will not show up on internet explorer when contents overflow (particularly with accordion expanding). I'm testing with IE 11 but I've been told the same issue happens in IE 10 as well. Visit the JSFiddle above with IE and expand the accordions to get a sense of what I mean.
The CSS that's causing the issue is the following
html,
body {
height: 100%;
overflow: hidden;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
max-height: calc(100% - 120px);
overflow-y: scroll;
padding: 0px 10%;
margin-top: 60px;
}
For some reason, IE is overriding my overflow-y settings and I can't find a solution for this.
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<link href="MasterPage.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/Content/scripts/Utility.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Test</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!--<li class="active">Home</li>-->
<li>Home</li>
</ul>
</div>
</div>
</nav>
<!-- Wrap all page content here -->
<div id="wrap">
<div class="container">
<div class="page-header">
<h1>Tests</h1>
</div>
<p class="lead">Test</p>
<div id="collapsibleTable" class="table-responsive">
<table class="table table-striped table-hover table-bordered" style="border-collapse:collapse;">
<thead>
<tr>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
<th class="centerText">TestCol</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#collapsible1" class="accordion-toggle">
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
</tr>
<tr class="hiddenRow"></tr>
<tr>
<td colspan="9" class="hiddenRow">
<div class="accordian-body collapse" data-gameId="#Current.GameID" id="collapsible1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis tortor. In hac habitasse platea dictumst. Morbi elementum est sed nunc tincidunt, eu porttitor nunc ultrices. Suspendisse imperdiet urna sed ex dapibus interdum non eget mauris. Donec ac magna nec mauris aliquam scelerisque et nec diam. Aliquam lorem odio, sollicitudin non nunc ac, volutpat iaculis erat. Nullam convallis arcu at metus blandit eleifend in a magna. Sed sollicitudin fringilla nibh eget iaculis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed fringilla id ipsum ut consequat. Sed nec pretium nunc. Nam id elementum elit, quis placerat leo. Curabitur at varius tortor, ac bibendum diam. Nam vulputate magna vel feugiat rutrum. Vestibulum convallis libero a est lacinia, sit amet laoreet neque pretium. Nunc diam ligula, facilisis non ante a, tempus congue elit. Duis egestas erat id suscipit elementum. Etiam sed ultrices neque. Etiam volutpat augue eget ex accumsan, in varius odio mollis. Phasellus a nunc hendrerit, vehicula mi at, ultrices turpis. Quisque ornare tristique leo, nec facilisis magna posuere sed. Nunc lacinia vestibulum commodo. Quisque eu consequat ipsum.
In auctor sapien a ex consectetur rhoncus. Ut dolor justo, dignissim nec ornare ac, rutrum eget ligula. Aenean nunc odio, rhoncus vel imperdiet eu, faucibus quis urna. In iaculis velit vel augue eleifend, eu sollicitudin purus hendrerit. Sed rhoncus felis nisi, in vehicula tellus efficitur quis. In scelerisque diam nisi, in dictum tellus faucibus sed. Aenean pharetra non augue quis tincidunt. Phasellus vel arcu sapien. In justo dui, semper a lorem sit amet, feugiat ullamcorper tortor. Praesent quis hendrerit magna. Sed facilisis rhoncus facilisis. Maecenas ac suscipit velit, at interdum neque. Ut sit amet eleifend dolor.
Vestibulum ut egestas metus. Nunc sagittis sapien ac nisi volutpat, non sagittis dui vehicula. Etiam vitae ante a leo vestibulum sodales. In finibus diam id mi condimentum, ac feugiat sem mollis. Ut sagittis dolor ac neque gravida tempus. Duis tempor dolor non convallis eleifend. Vivamus a tellus pharetra, condimentum sem ut, feugiat libero. Maecenas commodo luctus auctor. Sed ut auctor orci. Suspendisse tincidunt felis neque.
Suspendisse potenti. Donec tortor mi, elementum ut volutpat sed, auctor id urna. Phasellus ultrices ultricies orci, nec gravida felis rutrum et. Nulla feugiat nisl in diam blandit feugiat. Nam suscipit enim laoreet placerat rutrum. Mauris mattis pellentesque nulla, in sagittis nunc ullamcorper quis. Suspendisse et molestie mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pretium libero nec dolor faucibus, id elementum enim ultrices. Vestibulum dui urna, tristique in elit eu, eleifend feugiat eros. Vivamus velit velit, pharetra sit amet maximus vel, cursus id nulla. Maecenas ullamcorper, augue eget viverra dictum, ex nunc dignissim sapien, in mattis diam risus at ex.
Maecenas lectus tellus, semper nec metus vel, mattis ultricies elit. Pellentesque laoreet dapibus sem sit amet molestie. Cras purus nibh, dictum quis massa eget, sollicitudin euismod metus. Phasellus consequat eget nisi sed sollicitudin. Cras enim nulla, ornare eget sollicitudin ut, mattis vel arcu. Nam fermentum pellentesque nulla. Suspendisse eget nibh enim. Donec id nunc quis velit lobortis elementum. Maecenas non interdum ex. In placerat magna at nisl aliquet tristique. Mauris accumsan, est sit amet varius accumsan, risus libero blandit dolor, in malesuada quam lacus at nunc.
Donec finibus odio at lacinia tristique. Duis rutrum sapien ac mauris dignissim, tempus eleifend urna pretium. Phasellus non sem id ipsum accumsan consequat ultrices eu turpis. Etiam et purus congue lorem convallis porttitor. Morbi in diam id risus iaculis porta. Etiam commodo non ante ut maximus. Donec rhoncus porta justo. Proin sit amet ullamcorper turpis. Aliquam ut velit at eros semper laoreet ut non risus. Praesent luctus sit amet metus sed consectetur. Donec volutpat in magna eget posuere. Cras accumsan mattis odio quis fermentum. Integer quis fringilla nibh, egestas euismod quam. Nullam at tempus ipsum.
Duis efficitur, eros vitae imperdiet ullamcorper, est magna sollicitudin lectus, quis feugiat metus quam sed ante. Vestibulum facilisis placerat risus, sed porttitor nibh ultrices ut. Quisque urna odio, facilisis tempus vehicula sed, varius in risus. Praesent magna nunc, tincidunt ut enim vitae, convallis venenatis dui. Aliquam tristique ligula risus, et fringilla magna tincidunt semper. Cras dolor justo, efficitur at tellus quis, sagittis molestie purus. Nunc id metus placerat, dapibus libero at, sollicitudin massa. Donec at odio ex. Praesent suscipit bibendum turpis id imperdiet. Morbi non leo ac augue malesuada pellentesque ac a leo. Nam magna est, sollicitudin nec tempor sed, maximus vel leo. Duis tristique sem sit amet ante dignissim, et mollis mi maximus. Vivamus interdum magna rhoncus hendrerit tempor. Cras non blandit massa.
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#collapsible2" class="accordion-toggle">
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
<td class="centerText">Test</td>
</tr>
<tr class="hiddenRow"></tr>
<tr>
<td colspan="9" class="hiddenRow">
<div class="accordian-body collapse" data-gameId="#Current.GameID" id="collapsible2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis tortor. In hac habitasse platea dictumst. Morbi elementum est sed nunc tincidunt, eu porttitor nunc ultrices. Suspendisse imperdiet urna sed ex dapibus interdum non eget mauris. Donec ac magna nec mauris aliquam scelerisque et nec diam. Aliquam lorem odio, sollicitudin non nunc ac, volutpat iaculis erat. Nullam convallis arcu at metus blandit eleifend in a magna. Sed sollicitudin fringilla nibh eget iaculis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed fringilla id ipsum ut consequat. Sed nec pretium nunc. Nam id elementum elit, quis placerat leo. Curabitur at varius tortor, ac bibendum diam. Nam vulputate magna vel feugiat rutrum. Vestibulum convallis libero a est lacinia, sit amet laoreet neque pretium. Nunc diam ligula, facilisis non ante a, tempus congue elit. Duis egestas erat id suscipit elementum. Etiam sed ultrices neque. Etiam volutpat augue eget ex accumsan, in varius odio mollis. Phasellus a nunc hendrerit, vehicula mi at, ultrices turpis. Quisque ornare tristique leo, nec facilisis magna posuere sed. Nunc lacinia vestibulum commodo. Quisque eu consequat ipsum.
In auctor sapien a ex consectetur rhoncus. Ut dolor justo, dignissim nec ornare ac, rutrum eget ligula. Aenean nunc odio, rhoncus vel imperdiet eu, faucibus quis urna. In iaculis velit vel augue eleifend, eu sollicitudin purus hendrerit. Sed rhoncus felis nisi, in vehicula tellus efficitur quis. In scelerisque diam nisi, in dictum tellus faucibus sed. Aenean pharetra non augue quis tincidunt. Phasellus vel arcu sapien. In justo dui, semper a lorem sit amet, feugiat ullamcorper tortor. Praesent quis hendrerit magna. Sed facilisis rhoncus facilisis. Maecenas ac suscipit velit, at interdum neque. Ut sit amet eleifend dolor.
Vestibulum ut egestas metus. Nunc sagittis sapien ac nisi volutpat, non sagittis dui vehicula. Etiam vitae ante a leo vestibulum sodales. In finibus diam id mi condimentum, ac feugiat sem mollis. Ut sagittis dolor ac neque gravida tempus. Duis tempor dolor non convallis eleifend. Vivamus a tellus pharetra, condimentum sem ut, feugiat libero. Maecenas commodo luctus auctor. Sed ut auctor orci. Suspendisse tincidunt felis neque.
Suspendisse potenti. Donec tortor mi, elementum ut volutpat sed, auctor id urna. Phasellus ultrices ultricies orci, nec gravida felis rutrum et. Nulla feugiat nisl in diam blandit feugiat. Nam suscipit enim laoreet placerat rutrum. Mauris mattis pellentesque nulla, in sagittis nunc ullamcorper quis. Suspendisse et molestie mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pretium libero nec dolor faucibus, id elementum enim ultrices. Vestibulum dui urna, tristique in elit eu, eleifend feugiat eros. Vivamus velit velit, pharetra sit amet maximus vel, cursus id nulla. Maecenas ullamcorper, augue eget viverra dictum, ex nunc dignissim sapien, in mattis diam risus at ex.
Maecenas lectus tellus, semper nec metus vel, mattis ultricies elit. Pellentesque laoreet dapibus sem sit amet molestie. Cras purus nibh, dictum quis massa eget, sollicitudin euismod metus. Phasellus consequat eget nisi sed sollicitudin. Cras enim nulla, ornare eget sollicitudin ut, mattis vel arcu. Nam fermentum pellentesque nulla. Suspendisse eget nibh enim. Donec id nunc quis velit lobortis elementum. Maecenas non interdum ex. In placerat magna at nisl aliquet tristique. Mauris accumsan, est sit amet varius accumsan, risus libero blandit dolor, in malesuada quam lacus at nunc.
Donec finibus odio at lacinia tristique. Duis rutrum sapien ac mauris dignissim, tempus eleifend urna pretium. Phasellus non sem id ipsum accumsan consequat ultrices eu turpis. Etiam et purus congue lorem convallis porttitor. Morbi in diam id risus iaculis porta. Etiam commodo non ante ut maximus. Donec rhoncus porta justo. Proin sit amet ullamcorper turpis. Aliquam ut velit at eros semper laoreet ut non risus. Praesent luctus sit amet metus sed consectetur. Donec volutpat in magna eget posuere. Cras accumsan mattis odio quis fermentum. Integer quis fringilla nibh, egestas euismod quam. Nullam at tempus ipsum.
Duis efficitur, eros vitae imperdiet ullamcorper, est magna sollicitudin lectus, quis feugiat metus quam sed ante. Vestibulum facilisis placerat risus, sed porttitor nibh ultrices ut. Quisque urna odio, facilisis tempus vehicula sed, varius in risus. Praesent magna nunc, tincidunt ut enim vitae, convallis venenatis dui. Aliquam tristique ligula risus, et fringilla magna tincidunt semper. Cras dolor justo, efficitur at tellus quis, sagittis molestie purus. Nunc id metus placerat, dapibus libero at, sollicitudin massa. Donec at odio ex. Praesent suscipit bibendum turpis id imperdiet. Morbi non leo ac augue malesuada pellentesque ac a leo. Nam magna est, sollicitudin nec tempor sed, maximus vel leo. Duis tristique sem sit amet ante dignissim, et mollis mi maximus. Vivamus interdum magna rhoncus hendrerit tempor. Cras non blandit massa.
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">This is a test.</p>
</div>
</div>
</body>
</html>
CSS:
body {
margin-bottom: 60px;
}
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
overflow: hidden;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
max-height: calc(100% - 120px);
overflow-y: scroll;
padding: 0px 10%;
margin-top: 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
position: fixed;
bottom: 0;
width: 100%;
}
.hiddenRow {
padding: 0 !important;
cursor: default !important;
}
.hiddenRow tbody tr td {
background-color: white !important;
cursor: default !important;
}


Your #wrap div is using a few things that combined are causing this bug. These are overflow-y: scroll and max-height, but also calc that sometimes behave weird on IE11.
The easiest solution is to use height: calc(100% - 120px) instead of max-height and that will solve the issue on IE11. Other workarounds include setting the element as position: relative but in your case, max-height still causes the issue.
Updated fiddle at https://jsfiddle.net/ct24m4q0/1/


problem in wrap id please replace the wrap style with the style given below
#wrap {
max-height: -moz-calc(100% - 120px);
max-height: -webkit-calc(100% - 120px);
height:450px;
overflow-y: scroll;
padding: 0px 10%;
margin-top: 60px;
}
Please check the example code here codepen

Related

Fixed header, centered scrollable body with max width and scrollbar to the side with paddingY

I'm building a react app with flexbox and I'm struggling getting all the pieces as I want them.
I want a fixed header at the top with a body that has its content centered and that can be scrolled (the scrollbar has to start in the body, not the header). This body can't go to the edges of the page so I'm using max-width to prevent this. The problem is that when I use the max-width, the scrollbar gets placed next to the body and it looks awful. I want it to stay at the far right of the page. Finally I want some space between the end of the body and the page (a bit of padding, if you will) so the content doesn't look like it's getting cut with the end of the site.
I've done this mockup in Photoshop
I mostly got the code working, minus the max-width and bottom padding. Here's what I got:
html, body {
margin: 0;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
header {
background: white;
height: 50px;
}
main {
flex: 1;
overflow: auto;
}
<div id="container">
<header>top</header>
<main>
...
</main>
</div>
I understand that this question has been asked in multiple ways a lot of times, but I've been looking for a while and I can't find the right one that fixes every thing I need.
Thank you for the help.

What you can do is add another element within the <main> tag. I use a <div> tag in my example, but it could be whatever you want. Keep the
overflow: auto;
on the <main> tag, so when the inner div overflows, you can scroll the <main> tag to move the <div>
Here's an example where I added some background color to show separation and some Lorem Ipsum text:
html, body {
margin: 0;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
header {
background: white;
height: 50px;
text-align: center;
}
#stuff {
border-radius: 5px;
background: pink;
padding: 5px;
margin: 20px;
flex: 1;
}
main {
overflow: auto;
}
<div id="container">
<header>top</header>
<main>
<div id="stuff">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec magna porta, commodo magna ut, porta erat. Phasellus tristique leo vitae ante efficitur, sed fermentum mi auctor. In condimentum mi a urna cursus vestibulum. Nunc posuere metus turpis, faucibus viverra purus aliquam nec. Curabitur ultrices, sem nec aliquet congue, ligula justo sagittis arcu, quis blandit urna sem nec sem. Cras accumsan, turpis ac placerat porta, libero ex semper tellus, non mattis dui ligula id odio. Cras lobortis ex in ex consequat, eu viverra nibh luctus. Nulla facilisi. Nulla odio arcu, suscipit eu dui eget, cursus sodales ipsum. Nulla vestibulum nisl eget ante pellentesque, vel porttitor magna dapibus. Suspendisse at ligula nunc. Phasellus scelerisque urna sit amet scelerisque pharetra. Quisque risus metus, tincidunt vitae ultricies in, convallis tempus justo. Sed finibus laoreet dolor sit amet tincidunt. Sed efficitur volutpat aliquet.
Suspendisse condimentum euismod quam id tempor. Vestibulum rhoncus metus eu tortor rhoncus eleifend. Nam sagittis ex ex, eget varius ante semper a. Aenean vulputate eget ligula vel sodales. Vivamus vel nisi dignissim, eleifend sem non, bibendum dolor. Ut pulvinar malesuada nisi sit amet suscipit. Sed ultrices maximus tellus, nec congue felis.
Duis urna orci, consequat et lacinia lobortis, varius sed sem. Ut auctor congue augue quis interdum. Morbi erat justo, venenatis ac imperdiet sit amet, cursus eget tellus. Quisque accumsan nibh a dui vulputate tincidunt. Aenean accumsan diam lorem, ac rutrum magna ullamcorper et. Proin volutpat dolor tristique scelerisque tempus. Donec eu neque non purus pulvinar bibendum sed vitae justo. Suspendisse luctus dolor neque, eu convallis tortor condimentum ac. Aliquam sollicitudin ex ut sollicitudin sagittis. Aliquam imperdiet, diam vel hendrerit iaculis, neque ex accumsan neque, in hendrerit risus massa convallis ante. Cras urna velit, cursus sed dignissim vitae, porttitor faucibus est. Vestibulum ut dolor aliquam, malesuada velit ut, vestibulum nibh. Maecenas at convallis ex, a aliquam dui. Mauris at eros sit amet leo gravida pulvinar.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc faucibus laoreet ipsum, facilisis facilisis quam ultrices et. Vivamus interdum ut tortor sit amet sollicitudin. Cras rhoncus blandit lectus sed maximus. Integer ac dui nec metus dignissim lobortis vel vel erat. Cras in dignissim arcu. Nunc vulputate mi turpis, at dignissim turpis ullamcorper vitae. Cras neque justo, sagittis ut tempus vitae, pellentesque a mi.
Duis vehicula eros erat, vel tincidunt ante aliquet eget. Ut malesuada, est a sollicitudin tincidunt, magna ante varius est, vitae pulvinar arcu neque sit amet magna. Sed sit amet erat fermentum, bibendum ex sed, dictum lorem. Ut aliquam nibh vitae tellus convallis, sed condimentum augue suscipit. Nunc ac tellus sem. Maecenas vitae finibus lorem. Ut et fringilla lacus. Morbi neque lacus, rhoncus non odio et, sodales ultrices erat. Pellentesque molestie et felis sit amet pharetra. Curabitur id lacinia dolor. Curabitur non dignissim lorem, eleifend posuere lorem. Aliquam orci felis, vulputate vel felis molestie, vestibulum tempor tellus. Quisque mollis mauris blandit posuere tincidunt. Suspendisse condimentum est at enim interdum condimentum.
Aliquam a risus cursus, pretium dui nec, consectetur elit. Sed sollicitudin consectetur magna id accumsan. Quisque interdum tristique diam, at porta orci condimentum ut. Curabitur in metus purus. Donec diam orci, volutpat eu rhoncus in, accumsan sed neque. Nam egestas vestibulum vestibulum. Mauris fringilla, enim in finibus hendrerit, metus urna finibus lacus, in dictum eros eros vel orci. Aliquam blandit elit sem, vel fringilla libero commodo eu. Cras euismod a mauris non malesuada. Aliquam luctus malesuada nisl sed efficitur. Mauris suscipit convallis venenatis. Ut varius velit vitae scelerisque fermentum. Donec luctus convallis hendrerit. Sed vestibulum, diam at euismod lacinia, dolor eros commodo lacus, vitae pellentesque dui metus vel leo.
In hac habitasse platea dictumst. Nam massa lectus, fermentum non dolor eu, auctor luctus ex. Duis posuere sit amet lorem ut commodo. Pellentesque ultrices in tortor vel dignissim. Quisque lorem nibh, ullamcorper in sem nec, rhoncus posuere tortor. Aenean vitae feugiat nisi. Proin elementum sollicitudin iaculis. Morbi nec erat volutpat, posuere augue quis, porttitor erat. Aliquam dignissim blandit laoreet. Donec consectetur a risus et varius. Suspendisse quis vulputate tellus.
Nunc eget erat id lacus dictum viverra. Vivamus vel vehicula ipsum. Fusce convallis leo diam, sed consectetur nulla sagittis rutrum. Curabitur nec ligula convallis ex rutrum fermentum. Donec auctor, erat quis euismod maximus, sem massa fermentum tortor, non scelerisque nibh nisi at arcu. Vivamus sodales fermentum nisi quis tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst.
Nunc et lacus ac augue tincidunt pellentesque. Sed at odio at sem lobortis vestibulum. Sed cursus augue et sapien eleifend tempor. Etiam suscipit mi non est vehicula tincidunt a vitae libero. In blandit fringilla lectus non dignissim. In interdum, nisl non suscipit sagittis, sem erat sagittis ex, quis egestas lorem tellus nec metus. Suspendisse suscipit ultrices nunc eget vulputate. Donec mollis condimentum massa. Suspendisse potenti. Fusce eget urna ut dui fringilla faucibus et id justo.
Suspendisse posuere justo eget bibendum venenatis. Pellentesque sollicitudin nisi augue. Nunc sed justo ac mi ultrices elementum sit amet non lorem. Maecenas accumsan vehicula urna, sit amet posuere dolor malesuada at. Morbi vitae mi sed est suscipit euismod. Aliquam erat volutpat. Nulla elit purus, elementum at odio eget, tempor efficitur leo. Nunc dapibus erat nec faucibus rhoncus. Curabitur accumsan nibh sit amet sagittis placerat. Donec mollis metus eu metus eleifend ornare.
</div>
</main>
</div>

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

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>

What is height of header for which repeating header for each page on print will work of web page?

I have one report for which I am using the print option of Chrome. I need to repeat my headers for each page.
I am dividing my content as given below and it is working fine.
<table>
<thead>
<!-- Header Content(need to repeat)-->
</thead>
<tbody>
<!-- Body Content-->
</tbody>
</table>
This is working as expected but up to some particular height of the header.
When my header is more than some particular height, repeating header stops working.
When I try to change the paper size from chrome print to a bigger size than it will work for that same header height.
Ex. If my header is not working in A4 size paper, same will work if I try to change paper size to bigger size (A3) and suppose if my repeating header is working in A4 and if I change to small size (A5), it will not work.
I am not sure for how much height its stops working but it is happening in my live project and sample also.
Please have a look at the sample and also let me know if I am missing somewhere?

The breaking point is 245px (at least in chrome), but depending on it's content, you may need to reduce it. We found keeping it under 230 seems to work.
If you need more than that, we split up the content into two pieces, each capped at 230. The workaround is to stack multiple table-headers so it looks like one big header. Nest a second table in the tbody. It's not perfect, but it works. Hope this helps.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="example.css" />
</head>
<body>
<table class="w-100">
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="header1">
<h1>Header #1</h1>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<table class="w-100">
<thead>
<tr>
<td>
<div>
<div class="header2">
<h1>Header #2</h1>
</div>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales maximus nunc a dapibus. Mauris scelerisque efficitur velit sit amet accumsan. Praesent mattis nisl libero. Nullam ullamcorper vehicula aliquam. Vivamus nulla ipsum, aliquam et eros sit amet, placerat placerat orci. Nunc sit amet commodo mi. Morbi tincidunt nisi vitae mollis ullamcorper. Integer lacinia viverra justo quis tincidunt. Suspendisse non fringilla tellus, id accumsan nulla.
Mauris vehicula semper suscipit. Fusce vel ligula egestas, fringilla nulla sed, malesuada elit. Donec tellus est, pulvinar non suscipit ac, rhoncus sed ex. Etiam vulputate mauris et placerat iaculis. Sed scelerisque pretium turpis, vitae porta nibh gravida sed. Proin rhoncus pharetra elit id aliquam. Sed ut efficitur augue. Vestibulum quis velit vel diam gravida tincidunt. Morbi sit amet nisi ut ex posuere imperdiet in non quam. Morbi sit amet turpis sed lorem ullamcorper congue eget id leo. Nullam pulvinar lectus ligula, a rutrum erat volutpat in. Curabitur cursus ut dui vitae ornare.
Aliquam leo mauris, dapibus sit amet suscipit quis, lacinia euismod arcu. Donec blandit, felis id auctor pulvinar, tortor lorem faucibus eros, non viverra odio felis quis mauris. Phasellus scelerisque mi id pellentesque sodales. Fusce ipsum tellus, egestas ac ultricies nec, vehicula a odio. Aliquam luctus elit tortor, sit amet ultricies enim porta at. Nam hendrerit ligula varius quam fringilla elementum dictum id sapien. Ut ac blandit nibh. Aliquam vulputate finibus libero, tristique egestas metus varius et. Donec ornare magna lectus.
Cras imperdiet sit amet arcu quis maximus. Nulla id felis vestibulum, lacinia urna nec, interdum magna. Phasellus sit amet tristique massa. Integer vitae ante imperdiet, commodo eros vel, mollis metus. Aenean maximus quis est nec hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum pellentesque finibus. Etiam sed placerat nibh. Pellentesque nec pharetra justo, consequat vestibulum erat. Sed sit amet augue ut nisi mattis laoreet. Sed vestibulum odio ut urna egestas fermentum. Vestibulum viverra, nunc sit amet iaculis feugiat, nisl velit condimentum sapien, sit amet blandit nunc enim ut tellus. Aenean scelerisque arcu at gravida mattis. Donec vestibulum leo id ipsum pulvinar sodales.
Etiam ullamcorper sapien imperdiet massa rhoncus, nec sagittis sapien gravida. Donec erat justo, scelerisque et justo quis, accumsan congue nulla. In commodo velit dolor, sed placerat leo mollis sed. Donec lobortis eget leo sit amet tincidunt. Morbi non pulvinar arcu, at aliquet velit. In bibendum elit sit amet fringilla imperdiet. Proin gravida mi a convallis sodales. Suspendisse vestibulum lectus sed aliquet convallis. Proin eget diam varius, suscipit ante a, commodo odio. Etiam mattis laoreet elit pharetra mattis. Vivamus nec volutpat odio. Sed eget feugiat tortor, sed convallis turpis. Ut in est sed lacus egestas feugiat ut eget diam. Nam ultrices aliquet metus, pulvinar varius sapien dignissim vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla aliquam neque eu augue luctus, vel mattis est placerat. Nunc ultrices leo sem. Nam aliquam massa vel tortor consectetur, accumsan finibus purus ornare. Duis consequat tortor ut velit bibendum, quis bibendum sapien volutpat. Nunc ac turpis erat. Quisque sapien ligula, pellentesque consequat laoreet nec, efficitur sed enim. Sed id tortor sed nulla cursus sollicitudin vitae ac dolor.
Fusce rhoncus tellus vel lorem laoreet lacinia. Sed finibus elit ut dui scelerisque, vel cursus neque pellentesque. In viverra leo consequat urna hendrerit pretium. Nullam elementum, dolor ac pellentesque venenatis, tortor lorem imperdiet mi, eget dictum dolor sapien vel ipsum. Nunc nec imperdiet arcu. Donec nulla mauris, accumsan at velit vel, tempus eleifend felis. Pellentesque ut felis nisi. Praesent viverra, leo a vestibulum condimentum, nisl lorem ultricies leo, nec elementum diam odio in velit. Nulla vitae leo scelerisque, ultrices purus eget, ultricies ex. Cras hendrerit, neque a accumsan euismod, dui ex mollis tortor, et tincidunt est risus eget tellus. Vivamus a dictum metus, aliquam tincidunt est. Maecenas quis iaculis neque, a vulputate arcu. Suspendisse dui purus, euismod nec ipsum congue, tincidunt egestas risus. Cras ac sem felis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Pellentesque neque lacus, dictum quis leo non, vulputate dapibus ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean diam urna, malesuada eget blandit a, consequat quis sem. Nulla facilisi.
Nunc enim odio, porta eget elit et, placerat dignissim enim. In euismod dui pharetra diam ultrices, non semper lorem lacinia. Sed ut mollis mi. Etiam cursus fringilla rutrum. In feugiat ut ligula vel laoreet. Mauris volutpat lectus nec ligula vehicula, sed commodo nunc laoreet. Duis tortor odio, interdum sit amet interdum sed, consectetur vitae ipsum. Fusce fermentum elit libero, sit amet facilisis urna faucibus a. Nam sit amet dictum nisi, hendrerit laoreet metus.
Cras euismod semper erat eget pretium. Proin magna erat, convallis at sollicitudin sed, pharetra at mi. Sed consectetur id magna ac bibendum. Morbi a est egestas, aliquet magna eu, ornare dolor. In viverra sagittis hendrerit. Maecenas vel eleifend libero. Pellentesque in odio nec risus viverra facilisis ut eget ex. Nulla porta libero pellentesque velit efficitur ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales maximus nunc a dapibus. Mauris scelerisque efficitur velit sit amet accumsan. Praesent mattis nisl libero. Nullam ullamcorper vehicula aliquam. Vivamus nulla ipsum, aliquam et eros sit amet, placerat placerat orci. Nunc sit amet commodo mi. Morbi tincidunt nisi vitae mollis ullamcorper. Integer lacinia viverra justo quis tincidunt. Suspendisse non fringilla tellus, id accumsan nulla.
Mauris vehicula semper suscipit. Fusce vel ligula egestas, fringilla nulla sed, malesuada elit. Donec tellus est, pulvinar non suscipit ac, rhoncus sed ex. Etiam vulputate mauris et placerat iaculis. Sed scelerisque pretium turpis, vitae porta nibh gravida sed. Proin rhoncus pharetra elit id aliquam. Sed ut efficitur augue. Vestibulum quis velit vel diam gravida tincidunt. Morbi sit amet nisi ut ex posuere imperdiet in non quam. Morbi sit amet turpis sed lorem ullamcorper congue eget id leo. Nullam pulvinar lectus ligula, a rutrum erat volutpat in. Curabitur cursus ut dui vitae ornare.
Aliquam leo mauris, dapibus sit amet suscipit quis, lacinia euismod arcu. Donec blandit, felis id auctor pulvinar, tortor lorem faucibus eros, non viverra odio felis quis mauris. Phasellus scelerisque mi id pellentesque sodales. Fusce ipsum tellus, egestas ac ultricies nec, vehicula a odio. Aliquam luctus elit tortor, sit amet ultricies enim porta at. Nam hendrerit ligula varius quam fringilla elementum dictum id sapien. Ut ac blandit nibh. Aliquam vulputate finibus libero, tristique egestas metus varius et. Donec ornare magna lectus.
Cras imperdiet sit amet arcu quis maximus. Nulla id felis vestibulum, lacinia urna nec, interdum magna. Phasellus sit amet tristique massa. Integer vitae ante imperdiet, commodo eros vel, mollis metus. Aenean maximus quis est nec hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum pellentesque finibus. Etiam sed placerat nibh. Pellentesque nec pharetra justo, consequat vestibulum erat. Sed sit amet augue ut nisi mattis laoreet. Sed vestibulum odio ut urna egestas fermentum. Vestibulum viverra, nunc sit amet iaculis feugiat, nisl velit condimentum sapien, sit amet blandit nunc enim ut tellus. Aenean scelerisque arcu at gravida mattis. Donec vestibulum leo id ipsum pulvinar sodales.
Etiam ullamcorper sapien imperdiet massa rhoncus, nec sagittis sapien gravida. Donec erat justo, scelerisque et justo quis, accumsan congue nulla. In commodo velit dolor, sed placerat leo mollis sed. Donec lobortis eget leo sit amet tincidunt. Morbi non pulvinar arcu, at aliquet velit. In bibendum elit sit amet fringilla imperdiet. Proin gravida mi a convallis sodales. Suspendisse vestibulum lectus sed aliquet convallis. Proin eget diam varius, suscipit ante a, commodo odio. Etiam mattis laoreet elit pharetra mattis. Vivamus nec volutpat odio. Sed eget feugiat tortor, sed convallis turpis. Ut in est sed lacus egestas feugiat ut eget diam. Nam ultrices aliquet metus, pulvinar varius sapien dignissim vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla aliquam neque eu augue luctus, vel mattis est placerat. Nunc ultrices leo sem. Nam aliquam massa vel tortor consectetur, accumsan finibus purus ornare. Duis consequat tortor ut velit bibendum, quis bibendum sapien volutpat. Nunc ac turpis erat. Quisque sapien ligula, pellentesque consequat laoreet nec, efficitur sed enim. Sed id tortor sed nulla cursus sollicitudin vitae ac dolor.
Fusce rhoncus tellus vel lorem laoreet lacinia. Sed finibus elit ut dui scelerisque, vel cursus neque pellentesque. In viverra leo consequat urna hendrerit pretium. Nullam elementum, dolor ac pellentesque venenatis, tortor lorem imperdiet mi, eget dictum dolor sapien vel ipsum. Nunc nec imperdiet arcu. Donec nulla mauris, accumsan at velit vel, tempus eleifend felis. Pellentesque ut felis nisi. Praesent viverra, leo a vestibulum condimentum, nisl lorem ultricies leo, nec elementum diam odio in velit. Nulla vitae leo scelerisque, ultrices purus eget, ultricies ex. Cras hendrerit, neque a accumsan euismod, dui ex mollis tortor, et tincidunt est risus eget tellus. Vivamus a dictum metus, aliquam tincidunt est. Maecenas quis iaculis neque, a vulputate arcu. Suspendisse dui purus, euismod nec ipsum congue, tincidunt egestas risus. Cras ac sem felis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Pellentesque neque lacus, dictum quis leo non, vulputate dapibus ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean diam urna, malesuada eget blandit a, consequat quis sem. Nulla facilisi.
Nunc enim odio, porta eget elit et, placerat dignissim enim. In euismod dui pharetra diam ultrices, non semper lorem lacinia. Sed ut mollis mi. Etiam cursus fringilla rutrum. In feugiat ut ligula vel laoreet. Mauris volutpat lectus nec ligula vehicula, sed commodo nunc laoreet. Duis tortor odio, interdum sit amet interdum sed, consectetur vitae ipsum. Fusce fermentum elit libero, sit amet facilisis urna faucibus a. Nam sit amet dictum nisi, hendrerit laoreet metus.
Cras euismod semper erat eget pretium. Proin magna erat, convallis at sollicitudin sed, pharetra at mi. Sed consectetur id magna ac bibendum. Morbi a est egestas, aliquet magna eu, ornare dolor. In viverra sagittis hendrerit. Maecenas vel eleifend libero. Pellentesque in odio nec risus viverra facilisis ut eget ex. Nulla porta libero pellentesque velit efficitur ornare.
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
<div class="footer w-100">
<h2>footer</h2>
</div>
</body>
</html>
CSS:
.header1, .page-header-space {
height: 230px!important;
overflow:hidden;
}
.footer, .page-footer-space {
height: 230px;
}
.header1{
background-color: rgba(223, 223, 223, 0.5);
}
.header2{
background-color: rgba(223, 223, 223, 0.5);
height:230px;
}
.footer{
background-color: rgba(223, 223, 223, 0.5);
}
#media print{
.page-header, .page-header-space {
height: 230px!important;
overflow:hidden;
}
.footer {
position: fixed;
bottom: 1px;
}
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
body {margin: 0;}
}
.w-100{width:100%;}
/*---Reset---*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
border-spacing:0;
}

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.