html,
body {
height: 100%;
}
body {
margin: 0;
}
nav {
position: fixed;
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
height: 100px;
background: #eee;
}
a {
text-decoration: none;
color: #000;
}
#content {
position: absolute;
top: 100px;
width: 2000px;
height: calc(100% - 100px);
overflow: auto;
background: rgba(0, 0, 0, 0.2);
}
<nav>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
</nav>
<div id="content">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa distinctio molestias blanditiis! In quasi necessitatibus voluptatem. Quia laudantium consequatur repellendus hic, nulla sequi at adipisci error, obcaecati vero voluptas debitis.</div>
<div>Placeat est voluptas necessitatibus, deserunt impedit ex. Nesciunt voluptatum provident veritatis quisquam ex est id modi suscipit, dignissimos unde culpa fugiat saepe officiis, assumenda sint doloremque accusantium cumque deleniti mollitia!</div>
<div>Voluptate ratione nostrum debitis, deleniti sequi quaerat, doloribus expedita incidunt assumenda excepturi ullam, quae! Facere cum, placeat culpa aspernatur nesciunt odit ipsam, deleniti quibusdam molestiae dignissimos animi accusantium, labore hic.</div>
<div>Quidem ipsum ex vel temporibus delectus autem culpa, deleniti sed iusto omnis minus eum ipsa earum distinctio officia id, exercitationem quasi qui error optio commodi ad at aut! Veritatis, eum.</div>
<div>Corporis incidunt, harum! Minus nihil, itaque quae odit, ipsum recusandae ex adipisci, hic natus ratione unde. Magnam quibusdam quos facere, temporibus voluptatem vel, aut, quia maxime nulla sunt at similique.</div>
<div>Ducimus, fugiat! Magnam nostrum pariatur molestiae quisquam nulla quae odio laborum qui architecto, ex nemo reprehenderit, voluptatibus cupiditate dolorem quam veniam officia earum. Quidem repellat fugit, delectus. Culpa, neque, voluptatem.</div>
<div>Qui tenetur iure eaque assumenda dicta, ea quibusdam consequuntur. Quasi culpa aliquam sint quas voluptatibus molestiae consequatur voluptates modi, non, rem facilis, vitae pariatur doloribus laboriosam dolore suscipit cum voluptas.</div>
<div>Minus ratione esse voluptatibus omnis saepe enim ullam unde dolorem non voluptatum. Quas dolores, quasi eos, repudiandae mollitia laborum, maxime iste fugit molestiae consectetur expedita excepturi fugiat nihil similique sequi!</div>
<div>Ea, aliquam, placeat. Nostrum nam quasi maxime eveniet est, nemo explicabo voluptate ratione dolores nobis, voluptatibus expedita eum iste necessitatibus. Veniam quibusdam, autem, a enim voluptatibus ut perferendis necessitatibus sequi.</div>
<div>Obcaecati praesentium, sit nemo, minima reiciendis atque hic officia, aut necessitatibus commodi perspiciatis deleniti rerum nihil quos velit impedit facilis totam debitis distinctio? Maiores soluta, explicabo, officia non earum id.</div>
<div>Accusamus officia, quas iusto quis hic corrupti repellat porro vero voluptate numquam facilis culpa earum deserunt cum obcaecati, molestias! Excepturi, natus, deleniti? Totam, omnis odit repudiandae magni culpa dolor, similique.</div>
<div>Deserunt animi illo nulla eligendi, corporis dignissimos odio, eum deleniti numquam a. Vel ratione ducimus veniam dicta, doloremque velit praesentium ipsam mollitia delectus quibusdam natus necessitatibus, unde illo, quam quisquam!</div>
<div>Architecto veritatis esse earum fugiat id. Distinctio necessitatibus debitis aspernatur architecto, totam aperiam facilis minima, beatae nisi, earum quia sint nostrum! Quidem, recusandae, est. Excepturi vitae quaerat a perspiciatis iusto.</div>
<div>Vero officiis qui nesciunt, culpa quaerat eius sed itaque fugit doloremque, quam at consequatur ratione suscipit quisquam accusamus. Obcaecati iure quam atque accusantium reiciendis laboriosam eaque sequi magni pariatur aperiam!</div>
<div>Architecto aliquid ratione cupiditate maiores repudiandae ipsum deleniti fugiat ex consequatur ullam libero voluptatum, aperiam a, itaque labore corporis asperiores incidunt soluta. Perferendis, porro unde blanditiis veritatis mollitia labore eos?</div>
<div>Tenetur, voluptatibus magni voluptates illum vel quam, consequuntur delectus et dolorum, libero eum sapiente nihil inventore! Quisquam cum ad, eos iure esse, laboriosam! Exercitationem ut deserunt veniam quod, et labore?</div>
<div>Corrupti esse dolores fugit voluptas repellat veniam accusantium deleniti exercitationem autem, aperiam quasi inventore ducimus commodi error facilis velit blanditiis totam voluptate! Quae obcaecati voluptates asperiores expedita, alias cumque commodi.</div>
<div>Molestiae pariatur, voluptatum at recusandae cumque fugit voluptates vel, enim a corporis, obcaecati accusantium porro quasi molestias possimus praesentium quia maxime quas repellat. Amet ad odio, voluptates eius asperiores harum.</div>
<div>Nulla similique, fuga cumque consequatur sunt a, perspiciatis facere iusto! Officiis suscipit id praesentium commodi culpa, amet sequi quod molestias cupiditate, cum voluptate obcaecati. Porro magnam atque, vel odit at!</div>
<div>Magni consequuntur accusamus alias voluptates nostrum, cumque voluptas molestias, quaerat libero. Tenetur incidunt animi, at sapiente dolore id ratione modi a pariatur, iure, delectus. Quod maxime nobis sequi distinctio obcaecati!</div>
<div>Voluptatum aperiam, qui quidem ullam facere voluptate. Tenetur ipsa adipisci laborum molestiae error quam velit odio, voluptatem, inventore ullam sequi, magnam laudantium minima. Sed, adipisci, sunt. Cupiditate expedita, dolorem voluptatibus.</div>
<div>Delectus, facere voluptatum officiis ipsa repellendus modi ut officia at iusto dignissimos, quae veritatis sequi reprehenderit ea fugit possimus, doloremque, commodi! Aliquam tempore consectetur illum quod reprehenderit sunt dicta accusamus.</div>
<div>Quos totam esse dolorum dolore, temporibus, mollitia quisquam neque non amet natus ducimus laudantium nemo. Repudiandae accusamus quia quasi, ullam, voluptatum ea necessitatibus fugit, optio quisquam enim animi consequatur nisi.</div>
<div>Suscipit minima numquam iste voluptate cumque, est doloribus consequatur officiis, iusto ratione, fuga beatae hic perspiciatis aspernatur odit sed velit dolores fugiat rem ab? Eum excepturi illum laudantium necessitatibus laborum!</div>
<div>Iste molestias illum rem natus voluptatum amet, adipisci, animi, dolore repellendus eligendi perferendis est mollitia. Sunt ipsam quam vel facere, fuga consectetur, maxime esse corrupti aut id dolorum aperiam sequi.</div>
<div>Repellendus atque quam minima corporis itaque omnis dolorem vero, pariatur natus ullam tenetur vitae hic commodi saepe nisi praesentium, laudantium totam! Qui vero, doloremque! Quia ipsum, ducimus sit voluptate architecto!</div>
<div>Labore reiciendis aperiam culpa eius vel facilis, adipisci nisi assumenda at reprehenderit recusandae ut rem ipsa libero, molestias doloremque, illo earum iusto aut dolorum a officiis perspiciatis. Minus, eaque cupiditate!</div>
<div>Praesentium, harum, id. Illo cum dolorum ut quibusdam aperiam, hic! Culpa et dicta, nesciunt quia aspernatur similique consequuntur veritatis, numquam a ipsam tempora doloribus hic dolorem consequatur animi, nam commodi!</div>
<div>Odio harum aspernatur reiciendis, earum mollitia facere enim commodi quis hic numquam dolorem explicabo perspiciatis nesciunt voluptates, veniam debitis at perferendis! Earum quae explicabo pariatur fuga! Eos obcaecati, ipsa sunt.</div>
<div>Commodi placeat, neque reprehenderit ratione vero, excepturi iure nisi eveniet quo! Soluta mollitia iusto nobis cupiditate, quasi temporibus doloribus, quos perspiciatis unde! Dicta ratione consequatur odio velit reiciendis facilis voluptate.</div>
<div>Iusto aliquid ad consequuntur excepturi rem labore maiores, accusantium beatae impedit officiis quis. Omnis dolorum, similique vel quam reiciendis delectus, ratione. Eaque autem iusto ut necessitatibus pariatur eveniet ad quis.</div>
<div>Deserunt nihil maiores dolorum, accusamus eius cumque enim odit itaque id aliquam cupiditate quibusdam obcaecati iusto, ullam totam architecto doloribus libero commodi consequuntur, expedita non eaque. Dicta quod at, beatae.</div>
<div>Ab quas commodi quae voluptates non similique, ut corporis porro dignissimos, aperiam nihil dolore laboriosam dolorem adipisci, quasi eos quis quam odio sapiente reiciendis labore enim. Nostrum asperiores, ut ab.</div>
<div>Culpa numquam dolor rem vero ea excepturi dolorum quas consectetur atque aperiam, repellendus amet consequatur incidunt quasi, mollitia similique modi nisi illo aliquam, quam. Quae inventore asperiores ad consequuntur hic.</div>
<div>Sapiente, facere, repudiandae. Aliquid quo delectus, sunt, adipisci quaerat recusandae consectetur hic quasi placeat quisquam assumenda, doloremque cumque explicabo in expedita officia voluptas id! Ullam modi eius, deleniti ab. Ad!</div>
<div>Dignissimos, error, odio. Velit, cumque, adipisci? Mollitia ipsum deleniti labore atque ex voluptatibus omnis similique illum pariatur rerum natus at doloribus iure, reiciendis. Accusantium dicta placeat asperiores ad laborum blanditiis!</div>
<div>Minima voluptatem eveniet temporibus assumenda? Dicta nobis repellendus dolor minima nulla, hic at, nisi quis maxime sit ea iste eligendi totam, repellat odio dolorum accusantium. Maxime, necessitatibus. Ut, deserunt blanditiis.</div>
<div>Aut nihil quisquam, odit quam, harum, totam cum rerum iure nobis, nisi ducimus repudiandae debitis veritatis ratione tempora qui cupiditate autem minima aliquid temporibus atque. Doloribus officia natus voluptatem tempore!</div>
<div>Cumque omnis, dolorum quaerat quae ducimus, itaque est minima similique ab id labore dolorem quisquam delectus quas facilis amet asperiores saepe adipisci, tenetur tempore quod eum! Praesentium quasi commodi ex.</div>
<div>Saepe ipsum cum ea cupiditate ipsa, porro ullam minus, ex itaque tempora delectus perferendis animi et quidem voluptatibus eaque distinctio. Nostrum architecto officiis eaque incidunt expedita consectetur obcaecati iusto quidem.</div>
<div>Distinctio pariatur ipsum laudantium eligendi quo blanditiis, suscipit facere ut reiciendis optio quos, eum placeat nobis delectus rem nam minima officia porro totam inventore dolor quis neque, vel. Natus, magni.</div>
<div>Rem et enim animi laboriosam eos nihil ad consectetur. Nostrum nesciunt quibusdam ab distinctio consequatur totam fugit voluptatem doloribus modi adipisci quod facere impedit, ad quidem, in, dicta animi nam.</div>
<div>Accusantium accusamus quos commodi quidem, similique ipsam vitae, quis vel excepturi voluptates nostrum reprehenderit ipsum error doloremque ea dolores totam eius optio voluptatum blanditiis repellendus corporis. Excepturi facilis voluptates quod.</div>
<div>Alias eum ab ipsa dolorem, debitis? Ab iste id, perspiciatis incidunt cumque accusamus. Est temporibus voluptas, sint dolores dolor mollitia distinctio ad hic quasi, ullam, quisquam veniam non! Iusto, dolores!</div>
<div>Non saepe dicta optio, voluptates vitae ut nesciunt voluptatibus magnam natus est blanditiis, facere velit quibusdam! Iste qui quo, non laborum rem dolores explicabo recusandae doloribus consectetur natus, aperiam in.</div>
<div>Reiciendis facere voluptatem, nisi labore, excepturi sint, ea quibusdam quis unde enim sed veritatis! Id dolorum sit molestiae recusandae, sint et vel fugiat nesciunt nisi, fuga assumenda quos dolore facere.</div>
<div>Cumque dolor cupiditate sunt quasi assumenda corrupti non repudiandae dolores, aliquid ut pariatur facere! Recusandae facere nobis laboriosam commodi vitae maiores, quidem, ipsa animi, quibusdam tenetur, perferendis totam eligendi sed.</div>
<div>Et consectetur dolor esse voluptatibus quis natus itaque optio, velit dignissimos omnis reiciendis at, excepturi error enim odio, illo similique. Iure provident, debitis eveniet molestias, voluptate perspiciatis. Facilis, laborum, nisi.</div>
<div>Blanditiis doloribus voluptas veniam non enim esse, deleniti nemo facere, itaque assumenda culpa accusantium, natus ipsum sint. Quod magni fugiat eum tempora, iusto aliquam facilis dolorum corporis pariatur laudantium sed!</div>
<div>Harum fugit sapiente obcaecati nobis eius omnis nam maiores totam reiciendis, nemo? Eligendi iste, laborum. Non alias tempora in aliquid beatae repudiandae modi dolor est architecto. Nisi voluptate praesentium, atque!</div>
<div>Omnis maxime debitis ad ducimus mollitia, at? Totam error illum id distinctio quidem maiores quae inventore blanditiis neque provident quam, repellat ipsa sequi optio enim magni eum omnis eius reprehenderit.</div>
<div>Nostrum, eos porro nam mollitia ex ut voluptatum a illo! Harum odit autem fuga nihil vero praesentium natus facere libero fugiat in aut omnis laboriosam atque repellendus quod, amet minima!</div>
<div>Sit itaque officiis quaerat quod, odio deleniti. Tempora laudantium, aliquam accusantium exercitationem ullam sequi, illo earum suscipit, inventore magni numquam quod iusto quae reiciendis nihil neque hic nisi quas obcaecati?</div>
<div>Molestiae, ad quidem adipisci accusantium optio a labore vero alias. Fuga error iusto nesciunt architecto assumenda illum hic esse, optio, velit praesentium libero necessitatibus, quasi explicabo et similique facilis enim.</div>
<div>Architecto quisquam hic est! Fugit delectus amet quod sint ipsa neque, blanditiis sit itaque dolor nobis soluta iusto saepe nostrum, dolorem optio deleniti illo temporibus distinctio culpa dolores ut nisi.</div>
<div>Delectus veniam pariatur quis illo facilis eum odio temporibus numquam repudiandae, aut! Ipsam iusto asperiores ut blanditiis at provident dolor, fuga neque recusandae quis voluptatum sapiente itaque optio consequuntur dicta?</div>
<div>Quaerat temporibus optio earum. Consectetur facilis repellat quod nulla perferendis unde laboriosam, modi ipsa a voluptas eveniet nam laudantium! Atque similique error ducimus reprehenderit, nostrum explicabo aliquam numquam maiores, necessitatibus.</div>
<div>Quisquam, voluptates modi adipisci recusandae nostrum et iste ut voluptas veniam rerum. Possimus laborum atque, delectus ipsa vel voluptas architecto fugit iusto labore, hic officia aliquid iste magnam, totam deserunt.</div>
<div>Omnis amet, autem, laborum dolorem itaque pariatur asperiores obcaecati at, alias numquam nobis, beatae velit sapiente error molestiae. Fuga error saepe quae, tempore sunt praesentium ducimus quam at provident atque!</div>
<div>Optio iure sint accusamus amet repudiandae, quaerat in quo eius dolores quis numquam culpa possimus, repellat at debitis, facere, expedita rerum officiis soluta vero dolorum. Eos facilis, eius quos molestiae!</div>
</div>