<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Master</title>
<style>
html,
body {
height: 100%;
}
.full {
height: auto;
}
.container::-webkit-scrollbar {
display: none;
}
@media only screen and (max-width: 767px) {
.col-sm-6.container.custom-content {
overflow: visible !important;
height: auto !important;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item dropdown">
<a href="#">
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#"></a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid full ">
<div class="row full">
<div class="col-sm-3" style="padding: 0px 0px 0px 64px;">
</br>
</br>
<p><img src="https://www.whistler.com/images/placeholders/250x200.gif"></p>
<p><img src="https://www.whistler.com/images/placeholders/250x200.gif"></p>
<p><img src="https://www.whistler.com/images/placeholders/250x200.gif"></p>
</div>
<div class="col-sm-6 container custom-content" style="overflow: auto; height:677px;">
</br>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae leo elit. Nam laoreet viverra vulputate. In venenatis dui vulputate, luctus magna eget, volutpat lacus. Duis eu gravida lorem. Aliquam nunc urna, gravida et ligula ut, egestas
commodo orci. Aenean varius purus id nunc semper egestas. In mattis vehicula dictum. Duis sit amet pharetra justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nisi neque, porta sit amet
nibh et, tristique rhoncus ligula. Fusce tellus ligula, cursus in mauris quis, porttitor iaculis est. Quisque quis leo tellus. Mauris maximus porttitor urna, sed rutrum nibh feugiat eu. Nullam id consectetur risus. Curabitur sagittis
pellentesque neque a luctus. Aenean nec turpis eget nisl pretium pellentesque. Sed convallis in dolor quis vulputate. Morbi aliquet vitae sapien ut convallis. Etiam auctor vitae purus a varius. Etiam consequat blandit sapien, ac tristique
tortor scelerisque et. Nam odio quam, tristique nec felis ac, euismod egestas felis. Nullam risus ante, laoreet a ipsum quis, malesuada cursus justo. Curabitur placerat sapien pellentesque diam tempor, eu vestibulum nisl semper. Curabitur
ultricies libero et felis pellentesque, cursus ultricies enim rhoncus. Phasellus vitae velit porta, cursus magna at, lobortis velit. Proin lobortis nisl at rhoncus facilisis. Donec suscipit cursus urna in molestie. Nullam sed condimentum
felis. Ut finibus justo id turpis tempor convallis. Maecenas mollis sapien finibus, tempor tortor vel, posuere tortor. Morbi faucibus gravida mi, ac ornare sem commodo nec. Proin volutpat massa sit amet posuere maximus. Maecenas sit
amet consequat nibh, ut rhoncus urna. Curabitur ligula purus, commodo eu elit eu, placerat imperdiet enim. Nam et odio lacinia, vestibulum nisl vel, mollis lectus. Praesent bibendum lectus finibus egestas sagittis. Donec aliquet nulla
vitae elementum sollicitudin. Vivamus sagittis ligula sit amet odio sodales, dignissim consectetur nulla tristique. Nam id dignissim enim. Praesent ex neque, rhoncus in sollicitudin ut, laoreet ut elit. Integer sodales metus suscipit
turpis pharetra, vel dapibus purus imperdiet. Suspendisse dapibus eu dui vel feugiat. Quisque tincidunt a metus a sodales. Proin tincidunt pulvinar maximus. Vestibulum ligula leo, molestie at erat quis, feugiat rhoncus velit. Proin
eget hendrerit enim. Integer pellentesque tellus a augue varius venenatis. Nunc leo dolor, iaculis sit amet mauris vitae, blandit dignissim turpis. Maecenas nisl turpis, laoreet vel quam eget, placerat tincidunt erat. In nec dapibus
lacus, sed suscipit eros. Cras id nisi neque. Morbi sit amet malesuada neque. Vestibulum sit amet ligula eget risus viverra rutrum vitae tincidunt tellus. Fusce porttitor laoreet mauris, sed fringilla dui dapibus quis. Sed varius ligula
risus, et placerat nibh fringilla vitae. Etiam tortor quam, facilisis sed lacus vel, elementum dictum nisl. Sed eleifend sem at nisi pulvinar, a molestie libero vehicula. In tempus eleifend felis nec lacinia. Mauris efficitur diam
ligula, ut dictum erat fringilla in. Fusce a justo venenatis, posuere orci in, faucibus lectus. Cras aliquet volutpat felis, a rhoncus metus cursus sed. Vivamus sed luctus risus, id hendrerit eros. Proin vel mi aliquam, suscipit est
dictum, fringilla justo. Vivamus euismod nibh felis. Vestibulum felis risus, varius vel finibus iaculis, luctus in nibh. Aenean scelerisque convallis dolor ornare luctus. Sed nunc nunc, mollis eu faucibus ac, aliquet vel ante. Nam
imperdiet et ante in tempor. Vivamus eget feugiat tellus. Proin posuere justo ac sapien feugiat, et facilisis sem ultrices. Etiam eleifend, odio eget fermentum mattis, mauris velit convallis diam, a accumsan ipsum ex a ante. Morbi
maximus, turpis quis volutpat rhoncus, magna tellus tempor nulla, eu semper magna enim suscipit eros. Etiam sodales leo a magna consectetur semper. Suspendisse potenti. Mauris sit amet ornare urna. Etiam sem metus, convallis a accumsan
quis, fermentum id lacus. Duis sed arcu sit amet leo volutpat venenatis vel et risus. Suspendisse nulla orci, tempor eget turpis nec, faucibus scelerisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Aliquam erat volutpat. Nulla vel malesuada odio. Curabitur maximus ut velit non hendrerit. Ut a mattis lacus, non gravida nisl. Duis vehicula commodo dictum. Mauris et mauris vel tellus dapibus vehicula. Maecenas
tempor ornare felis, sit amet lobortis neque semper eu. Cras nulla purus, suscipit et nulla in, euismod facilisis ligula. Curabitur rhoncus ligula a pharetra varius. Nulla convallis vestibulum porttitor. Nullam imperdiet ipsum nisl,
vel hendrerit velit pretium sit amet. Nam commodo augue elit, ut maximus libero hendrerit nec. Aliquam non purus diam. Quisque et dapibus enim. Donec ante orci, rutrum vitae sollicitudin lacinia, elementum et sapien. Integer quis orci
enim. Nulla facilisi. Donec gravida nisi sed augue egestas, in dignissim massa finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur leo lectus, volutpat vel placerat vel,
dapibus eu nulla. Nulla volutpat ipsum sit amet nunc iaculis molestie. Sed suscipit dignissim elit sed tincidunt. Praesent ligula velit, convallis ac urna id, dapibus dignissim diam. Vivamus eu convallis purus, sit amet commodo quam.
Vestibulum rutrum vel sapien id ultrices. In facilisis lacus a ante pulvinar, eget egestas neque dictum. Donec quis sapien in nisi molestie tempor non eget magna. Duis sit amet dignissim urna. Vestibulum lobortis lorem a turpis ornare
venenatis in et odio. Praesent varius scelerisque dolor quis sollicitudin. In eget tellus neque. Ut cursus tristique laoreet. Sed ac mi ex. Curabitur pretium facilisis metus ac tincidunt. Suspendisse in mi justo. Proin lobortis augue
at mauris efficitur, vel lobortis ipsum vehicula. Praesent blandit, eros quis lacinia consequat, nunc ante auctor leo, et porta dolor lorem eu est. Mauris dignissim sagittis magna, a blandit elit vestibulum in. Duis volutpat fringilla
eleifend. Nulla euismod laoreet elit fringilla condimentum. Praesent vitae dolor eu nulla placerat porttitor vel eu sapien. Cras congue felis ut feugiat vehicula. Praesent ligula velit, volutpat sed elit ut, consectetur placerat tortor.
Phasellus vel lectus diam. Ut id metus ut quam venenatis bibendum. Suspendisse efficitur eleifend turpis non feugiat. Integer velit magna, pulvinar et leo sed, mollis tempus nunc. Sed odio lorem, lacinia nec congue quis, efficitur
et mauris. Ut fringilla non augue in consectetur. Nulla sed leo ac augue gravida finibus eget sit amet arcu. Maecenas dictum ipsum nec porttitor congue. Donec sodales congue feugiat. Suspendisse lobortis, turpis id tempus tempor, metus
libero dictum magna, sed iaculis metus massa mollis dolor. Vestibulum eget malesuada tellus. Fusce egestas, massa sit amet suscipit commodo, lacus sem finibus massa, quis cursus libero urna vitae tellus. Suspendisse efficitur lorem
ut nisl porttitor, eget aliquam dui finibus. Vivamus ornare ac justo id placerat. Ut vel tincidunt nunc, mattis ullamcorper erat. Donec non purus accumsan, commodo augue eget, bibendum leo. Cras vehicula urna id vestibulum aliquam.</p>
</div>
<div class="col-sm-3 " style="padding: 0px 0px 0px 64px;">
</br>
</br>
<p><img src="https://www.whistler.com/images/placeholders/250x200.gif"></p>
<p><img src="https://www.whistler.com/images/placeholders/250x200.gif"></p>
<p><img src="https://www.whistler.com/images/placeholders/250x200.gif"></p>
</div>
</div>
</div>
<div class="footer">
<div class="container" style="background-color: #212529;max-width: 100%;height: 50px;position: sticky;">
<span class="copyright" style="color:white; text-align:right;"></span>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js " integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN " crossorigin="anonymous "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js " integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q " crossorigin="anonymous "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js " integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl " crossorigin="anonymous "></script>
</body>
</html>
