I'm using bootstrap in my template also its having two or more main panels. i want to set independent scrolling of this panels. panel contents are loaded dynamically and also with no body scroll working with any resolution.
I'm tried this link,but cannot achieve this.
here is my sample code :
<!DOCTYPE html>
<html lang="en">
<head>
<title> Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
html, body {
overflow: hidden;
height: 100%;
}
section{
height: 85%;
}
header{
width: 100%;background-color: yellow;
height: 80px;
}
footer{
width: 100%;background-color: black;
height: 20px;
clear: both;
position: absolute;
bottom: 0;
}
#one{
float: left;
width: 15%;
background: green;
height: 100%;
overflow: hidden;
}
#left {
float: left;
width: 45%;
background: red;
height: 100%;
overflow-y: scroll;
}
#right {
float: left;
width: 40%;
background: blue;
height: 100%;
overflow-y: scroll;
}
</style>
</head>
<body >
<header>
</header>
<section>
<div id="one">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec lorem mauris. Nulla fermentum tincidunt nulla et dignissim. In porttitor sem id velit lobortis aliquam. Duis et purus ac orci porttitor luctus at quis leo. Mauris vulputate pellentesque est, sit amet egestas tellus facilisis sit amet. Cras sodales bibendum tellus, a gravida tortor hendrerit sed. Pellentesque blandit posuere nisl</p>
<p> tristique nibh venenatis. In id eros sed libero iaculis commodo quis vitae neque. Nulla gravida neque in tortor congue id mattis massa auctor. Cras auctor tincidunt ipsum, in suscipit risus iaculis sed. Nulla at eros nec urna auctor tincidunt eu ac diam. Aenean nulla metus, accumsan eu dignissim vitae, congue sed nisl. Pellentesque ut nunc eget metus malesuada vulputate interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p></div>
<div id="left">
<p> tristique nibh venenatis. In id eros sed libero iaculis commodo quis vitae neque. Nulla gravida neque in tortor congue id mattis massa auctor. Cras auctor tincidunt ipsum, in suscipit rSuspendisse congue fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p> commodo enim. Curabitur eu justo non felis tempus fermentum ut vitae augue. Ut cursus ultrices metus eu vehicula. Praesent sem nulla, eleifend eget adipiscing a, tempor sit amet lectus. Suspendisse congue fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p> Pellentesque felis erat, tristique nec semper vel, dignissim ut nisl. Donec ac dui purus. Nunc in ligula lacus. In vehicula scelerisque convallis. Ut in ornare ante. Vestibulum ante fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam et libero a nibh venenatis tristique vitae vitae ligula. Phasellus vitae tempor ante. Proin neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<br>
<h1>haridass</h1>
</div>
<div id="right">
<p>tae tempor ante. Proin egestas commodo enim. Curabitur eu justo non felis tempus fermentum ut vitae augue. Ut cursus ultrices metus eu vehicula. Praesent sem nulla, eleifend eget adipiscinggravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p> eget adipiscing a, tempor sit amet lectus. Suspendisse congue fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p>Ut in ornare ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam et libero a nibh venenatis tristique vitae vitae ligula. Phasellus vitae te Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<p>Suspendisse congue fringilla urna vitae dapibus. Phasellus iaculis, velit at ornare feugiat, nunc dolor scelerisque dolor, sed placerat enim magna sit amet magna. Quisque gravida arcu eu neque porttitor rutrum. Donec tempus urna interdum libero faucibus ac lacinia sapien bibendum. Quisque sed odio et metus molestie </p>
<br>
<h1>haridass</h1>
</div>
</section>
<footer></footer>
</body>
</html>