In addition to this html and body 100% trick:
html, body {
min-height: 100%;
}
Your element must be a position: absolute from the body.
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* { margin: 0; padding: 0; }
p { margin-bottom: 10px; }
html, body {
min-height: 100%;
position: relative;
}
.content { max-width: 1060px; margin: 0 auto; }
#overlay {
background: rgba(0,0,0,0.6);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis veritatis iure soluta rem earum ab tempora iusto laboriosam sed temporibus illo optio hic, totam labore deleniti dignissimos excepturi alias consequatur.</p>
<p>Laborum, impedit aspernatur ipsam enim. Optio, corrupti possimus, praesentium voluptatem sint quos accusamus eligendi iusto rerum amet sequi! Voluptatem consequatur beatae officiis magnam accusantium sunt laborum labore in accusamus minus?</p>
<p>Minima cum sit dolore modi. Mollitia adipisci eos accusantium voluptatem voluptatibus rerum vero explicabo sed animi repudiandae vel dolore culpa, perspiciatis accusamus eum fugiat sit praesentium error odio porro? Quas.</p>
<p>Ad reprehenderit fuga atque. Laboriosam harum iure, consectetur reiciendis dolores quisquam, expedita aut! Nisi natus ipsum reprehenderit odio doloremque, culpa accusantium laudantium error amet recusandae, cupiditate quidem? Ipsum, praesentium, dolorem.</p>
<p>Unde laudantium, mollitia quae ex eveniet cupiditate, distinctio doloribus facilis hic est nesciunt eligendi quasi non nostrum voluptate veritatis dignissimos, laboriosam nobis vitae. Voluptatibus ipsum animi in assumenda voluptatum doloremque.</p>
<p>Minima unde eligendi itaque hic eos sint ut reprehenderit cupiditate dolore, doloremque quod maiores, tempora sequi debitis. Quis, reiciendis sint, perspiciatis doloremque dolorem cupiditate, quasi nulla minus, alias consectetur voluptate.</p>
<p>Vero numquam autem reprehenderit ducimus laborum accusantium eaque illum, dicta ullam doloremque! Culpa perferendis quas expedita natus accusantium beatae, odit nam modi, sapiente assumenda minus, distinctio incidunt, doloribus adipisci! Hic!</p>
<p>Soluta mollitia eligendi voluptatum labore natus, facilis, maiores tenetur facere nobis consectetur, autem numquam aut repellendus laudantium. Accusantium, architecto quis deserunt, qui quo, dolor optio est quisquam ut aspernatur saepe!</p>
<p>Facilis reiciendis inventore quibusdam ullam itaque tempore porro consequatur, cumque qui rerum reprehenderit libero voluptate doloribus atque perspiciatis harum, dolor repellendus vero accusamus iusto. Harum explicabo facilis pariatur reprehenderit quibusdam.</p>
<p>Minus numquam nisi praesentium, quos doloribus? Ipsam distinctio, consequuntur quis. Odio vero est placeat, doloribus quod, dicta voluptate consectetur pariatur harum magni mollitia facilis nobis unde, saepe autem quasi inventore.</p>
<p>Consequuntur facere est deserunt illum voluptate aliquid ullam odio tempora eius, iste reiciendis consequatur repellat magni nemo dolore, tempore eveniet eaque enim ex nam delectus modi quae esse. Voluptates, facilis.</p>
<p>Architecto sint, dolor quisquam quidem enim porro molestias. Cum odio, amet, blanditiis ea facere fugiat nisi esse nihil, aliquam quibusdam harum debitis mollitia excepturi eum. Quidem, accusamus. Asperiores, velit culpa.</p>
<p>Repellendus expedita doloremque quis facere magni, voluptas voluptatem nobis at dolor quasi velit, commodi dignissimos eos quia, quod. Porro similique assumenda ea, possimus. Delectus, omnis cupiditate vero tenetur aspernatur quam.</p>
<p>Modi alias nihil at qui rem! Quas perferendis, doloribus. Sunt aut deserunt, natus minima a amet dolore voluptate eligendi placeat! Laudantium laboriosam doloribus quibusdam quaerat optio dolorum minima eum totam?</p>
<p>Eaque suscipit blanditiis itaque, facere iste, quos voluptatum delectus necessitatibus nihil hic veniam dolores voluptatibus reiciendis, nobis sapiente minus perferendis exercitationem ullam dolorem officia consequatur. Sunt totam aspernatur quisquam asperiores.</p>
<p>Similique vero, laudantium explicabo rerum. Nobis id aliquid vel perspiciatis explicabo et hic numquam commodi esse incidunt consequatur necessitatibus, quod, officiis! Rem ipsum dolore facilis, beatae quam hic culpa quis!</p>
<p>Nam fuga rem magni corrupti cum, corporis ducimus iste ex unde cupiditate ipsum voluptate maxime doloremque minus rerum similique laboriosam optio veritatis sapiente. Fugit harum excepturi temporibus, sint nam, dolorem?</p>
<p>Harum quis, dolores explicabo sint, ratione aperiam earum quo sapiente soluta optio quae necessitatibus autem et doloribus nemo esse numquam perferendis repudiandae, nostrum saepe velit nam? Dolorum deserunt ex ipsa!</p>
<p>Temporibus tempore nulla laborum aliquid? A, ipsa, architecto. Recusandae veniam quisquam nisi obcaecati laudantium adipisci mollitia, sequi iusto est inventore, ad non. Porro, distinctio itaque accusamus blanditiis omnis autem, nostrum.</p>
<p>Veritatis voluptate, impedit reiciendis, eius debitis ex at sit id error accusantium repellat libero non repudiandae ipsa labore consectetur ducimus autem dignissimos accusamus voluptatibus dolorem. Perspiciatis porro rem officia architecto?</p>
<p>Sapiente illo autem laudantium laboriosam fugit pariatur voluptatibus quod nostrum, doloribus perspiciatis aspernatur error quos dolorem suscipit. Autem adipisci ullam ab accusamus, illo minima! Voluptatum ea praesentium quas nostrum consequuntur.</p>
<p>Possimus eum optio exercitationem adipisci animi dignissimos earum sed ab, cumque, rerum doloremque mollitia vitae autem, nulla! Reiciendis minus, eius nulla. Odit quae itaque quam aut, iure voluptatum, iusto aliquid.</p>
<p>Explicabo fugit, non, quasi odio quod tempore magni dicta consequatur possimus incidunt, provident aliquid! Nesciunt et accusamus aliquam repellat debitis veritatis numquam corrupti ullam ipsum ipsam, voluptatibus officiis unde pariatur.</p>
<p>Porro neque omnis voluptas dolorum atque et ipsum ratione rem autem necessitatibus vitae magnam voluptatibus, molestias vero eum officiis, laboriosam possimus hic doloremque dolor sit. Commodi animi fugit temporibus saepe.</p>
<p>Explicabo neque, mollitia hic, laboriosam eligendi eaque repellat omnis! Culpa, odit recusandae. Sunt atque exercitationem, deserunt beatae nesciunt iure vel pariatur aspernatur soluta rem aut sequi expedita eligendi. Eligendi, animi?</p>
<p>Totam mollitia placeat dignissimos commodi magni quaerat, voluptatem animi ex hic fuga doloremque distinctio modi fugit, blanditiis numquam delectus facilis culpa, ipsam itaque minima. Nihil rerum dicta repudiandae repellendus ducimus.</p>
<p>Praesentium suscipit, voluptatum optio cum doloribus sit! Quam eaque, fuga, accusantium ad inventore ipsa voluptatum repellendus sint itaque nobis tempore maxime perferendis nemo minima dolorum, aliquam eius officiis nisi quaerat.</p>
<p>Quaerat sapiente, est ipsam quas, ex eos cum, ipsum modi sint debitis officia at. Officiis, provident voluptate. Totam molestiae esse sed provident, veniam ducimus consequatur impedit, beatae eveniet distinctio hic.</p>
<p>Saepe, accusantium sint, iusto eveniet vero perspiciatis voluptatibus maxime voluptate est quibusdam ab! Enim accusamus quis facere, dicta sequi, ratione vero eos mollitia, excepturi iste vel aliquid reiciendis! Unde, asperiores.</p>
<p>Atque accusantium quidem possimus sit molestias ullam praesentium quaerat fuga unde iusto optio, aperiam deserunt voluptatem ducimus provident rerum dolorum vel! Laudantium velit veritatis quis cum sequi suscipit, mollitia expedita!</p>
<p>Explicabo modi et voluptatibus accusantium in dolorum, doloribus ipsa ipsum doloremque id neque itaque, animi magnam vero reprehenderit quae sunt ducimus expedita incidunt sint sequi consequuntur totam minus. Architecto, ad!</p>
<p>Delectus beatae facere eaque. Praesentium earum inventore molestias quia iusto! Quidem consequuntur maiores, omnis veritatis iste beatae assumenda eius, at sequi dolores, blanditiis consectetur qui soluta reiciendis distinctio facere ducimus!</p>
<p>Laudantium rerum consectetur iusto quod reprehenderit non, aliquam nobis cumque esse animi ducimus impedit dolorem placeat officia pariatur dolores sed ipsa unde, ipsam itaque deserunt? Odit velit dolorum similique quos.</p>
<p>Nobis vitae quisquam quis eos commodi mollitia, possimus veritatis voluptas! Sint ad possimus ab odio repudiandae laudantium et nobis veritatis facere iste voluptates hic, sed ipsum voluptatibus enim, blanditiis eius!</p>
<p>Labore modi, explicabo. Quas quaerat aspernatur illo, explicabo maiores quos praesentium, in recusandae neque alias! Voluptates saepe, ratione maiores perspiciatis iusto obcaecati architecto quasi. Architecto beatae quasi corporis debitis consequatur!</p>
<p>Quo facere amet ipsam dolore fugit veritatis accusantium iste earum laudantium fuga, iure incidunt debitis aut, placeat ullam necessitatibus. Voluptatum explicabo perferendis, voluptas quidem praesentium quibusdam quaerat possimus in architecto.</p>
<p>Perspiciatis nam maxime facere pariatur, nihil architecto illum laboriosam hic neque non voluptatem sit, ipsum quasi est nemo ut, mollitia cupiditate! Assumenda laudantium rem quam labore nostrum, tempore reprehenderit eos!</p>
<p>Nihil tenetur ipsam quidem sint, fugiat doloremque voluptatibus autem esse vel, quam quo provident at saepe, nemo veritatis ab labore ex nulla excepturi laborum. Excepturi magni corrupti ipsam, quae id!</p>
<p>Aut in atque laudantium soluta voluptates ut non dolores, cupiditate corrupti facere beatae velit iste deserunt inventore quibusdam quisquam reprehenderit, laboriosam aspernatur earum, eveniet, eligendi? Ipsa perspiciatis aspernatur eligendi. Mollitia?</p>
<p>Sunt debitis eos quasi hic sapiente doloribus cum maxime cumque, nobis at impedit nulla quam nostrum tempora fugit, maiores perspiciatis iure! Blanditiis reiciendis alias saepe officia dolorem illum dignissimos aperiam!</p>
</div>
</body>
</html>