body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
.banner-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
background-color: #aaa;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.media-wrapper {
position: static;
height: 100%;
width: 100%;
}
.media-wrapper::before {
content: '';
display: block;
width: 0;
height: 500px;
/*В рабочем проекте поставить высоту 100%*/
background-color: #f3f2f7;
}
.content {
overflow: hidden;
position: relative;
background-color: #fff;
}
.clearfix:after {
clear: both;
}
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
<body>
<section class="banner-wrapper">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident nostrum incidunt qui velit, quo iusto repellat quia minus praesentium vitae, obcaecati quam sapiente nesciunt fuga doloremque itaque, fugiat facere! Nihil.
</section>
<section class="media-wrapper clearfix">
<div class="content">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ullam tempore quidem. Necessitatibus laudantium cum tempora quaerat distinctio odio accusamus, delectus placeat quibusdam, aut eos ratione ex rem nulla, nisi!</div>
<div>Velit quo porro, nesciunt soluta non obcaecati quos nisi, tenetur ut deleniti itaque voluptas reprehenderit eos suscipit? Error iusto quidem, nam nesciunt aspernatur ex doloribus cumque illum velit, quas, qui?</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ullam tempore quidem. Necessitatibus laudantium cum tempora quaerat distinctio odio accusamus, delectus placeat quibusdam, aut eos ratione ex rem nulla, nisi!</div>
<div>Velit quo porro, nesciunt soluta non obcaecati quos nisi, tenetur ut deleniti itaque voluptas reprehenderit eos suscipit? Error iusto quidem, nam nesciunt aspernatur ex doloribus cumque illum velit, quas, qui?</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ullam tempore quidem. Necessitatibus laudantium cum tempora quaerat distinctio odio accusamus, delectus placeat quibusdam, aut eos ratione ex rem nulla, nisi!</div>
<div>Velit quo porro, nesciunt soluta non obcaecati quos nisi, tenetur ut deleniti itaque voluptas reprehenderit eos suscipit? Error iusto quidem, nam nesciunt aspernatur ex doloribus cumque illum velit, quas, qui?</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ullam tempore quidem. Necessitatibus laudantium cum tempora quaerat distinctio odio accusamus, delectus placeat quibusdam, aut eos ratione ex rem nulla, nisi!</div>
<div>Velit quo porro, nesciunt soluta non obcaecati quos nisi, tenetur ut deleniti itaque voluptas reprehenderit eos suscipit? Error iusto quidem, nam nesciunt aspernatur ex doloribus cumque illum velit, quas, qui?</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ullam tempore quidem. Necessitatibus laudantium cum tempora quaerat distinctio odio accusamus, delectus placeat quibusdam, aut eos ratione ex rem nulla, nisi!</div>
<div>Velit quo porro, nesciunt soluta non obcaecati quos nisi, tenetur ut deleniti itaque voluptas reprehenderit eos suscipit? Error iusto quidem, nam nesciunt aspernatur ex doloribus cumque illum velit, quas, qui?</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ullam tempore quidem. Necessitatibus laudantium cum tempora quaerat distinctio odio accusamus, delectus placeat quibusdam, aut eos ratione ex rem nulla, nisi!</div>
<div>Velit quo porro, nesciunt soluta non obcaecati quos nisi, tenetur ut deleniti itaque voluptas reprehenderit eos suscipit? Error iusto quidem, nam nesciunt aspernatur ex doloribus cumque illum velit, quas, qui?</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ullam tempore quidem. Necessitatibus laudantium cum tempora quaerat distinctio odio accusamus, delectus placeat quibusdam, aut eos ratione ex rem nulla, nisi!</div>
<div>Velit quo porro, nesciunt soluta non obcaecati quos nisi, tenetur ut deleniti itaque voluptas reprehenderit eos suscipit? Error iusto quidem, nam nesciunt aspernatur ex doloribus cumque illum velit, quas, qui?</div>
<div>Atque in, exercitationem neque voluptates? Dolorem pariatur a, quam consequatur ab voluptatibus, esse consectetur perferendis natus, quas ratione, provident dolorum? Quasi inventore est labore quis commodi, obcaecati repellendus a ullam.</div>
<div>Eveniet sapiente necessitatibus fugiat quidem ducimus voluptas quae neque tenetur laudantium vero ullam pariatur enim omnis amet maxime, id, consectetur aut quos, illo culpa numquam porro nostrum. Fuga, vero? Voluptatum.</div>
<div>Eveniet quibusdam quam voluptas id beatae aspernatur vel vitae, odit distinctio quasi veniam eum commodi nesciunt odio consequuntur. Porro laborum accusamus maiores distinctio, cumque in perferendis voluptas sed, recusandae labore.</div>
<div>Sequi non suscipit laborum deserunt ducimus voluptatum excepturi voluptas velit quam in, repellendus aliquam nisi. Sequi sint itaque repudiandae dolor, perspiciatis illo vel commodi libero odio quos enim molestiae dicta?</div>
<div>Mollitia necessitatibus nostrum voluptatem fugiat excepturi recusandae illo! Aliquid, iste delectus minus expedita nostrum eius ex assumenda aliquam reprehenderit placeat omnis repellat corporis cupiditate quae libero. Nulla laboriosam excepturi,
nemo?</div>
<div>Sequi inventore suscipit libero tenetur facilis qui, animi provident earum et. Eum fuga iure iusto? Totam, quos. Error pariatur, nam magnam beatae, nihil adipisci autem aliquam, maxime obcaecati suscipit eligendi!</div>
<div>Maxime veniam quibusdam explicabo dolore sint commodi ducimus at modi neque ea expedita error alias voluptatibus cum blanditiis dolor, reiciendis quidem quaerat consequuntur saepe perferendis est nihil. Natus, quidem, soluta.</div>
<div>Maxime veniam quibusdam explicabo dolore sint commodi ducimus at modi neque ea expedita error alias voluptatibus cum blanditiis dolor, reiciendis quidem quaerat consequuntur saepe perferendis est nihil. Natus, quidem, soluta.</div>
<div>Maxime veniam quibusdam explicabo dolore sint commodi ducimus at modi neque ea expedita error alias voluptatibus cum blanditiis dolor, reiciendis quidem quaerat consequuntur saepe perferendis est nihil. Natus, quidem, soluta.</div>
<div>Maxime veniam quibusdam explicabo dolore sint commodi ducimus at modi neque ea expedita error alias voluptatibus cum blanditiis dolor, reiciendis quidem quaerat consequuntur saepe perferendis est nihil. Natus, quidem, soluta.</div>
<div>Maxime veniam quibusdam explicabo dolore sint commodi ducimus at modi neque ea expedita error alias voluptatibus cum blanditiis dolor, reiciendis quidem quaerat consequuntur saepe perferendis est nihil. Natus, quidem, soluta.</div>
</div>
</section>
</body>
ПКМ
и сохраните наРабочий стол
и готовое сохранится со всеми скриптами но без изображений или с ними , я так делал и готовое получилось - только поправить надо чуток – user33274 25 июл '16 в 16:15