<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- bootstrap3とjquery -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="left_sidebar col-sm-3 hidden-xs">
<p>Left Sidebar</p>
<ul id="list">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
<li>list5</li>
<li>list6</li>
<li>list7</li>
<li>list8</li>
<li>list9</li>
<li>list10</li>
</ul>
</div>
<div class="col-sm-6 main">
<div>
<h1>main content</h1>
<h1>content1</h1>
<h1>content2</h1>
<h1>content3</h1>
<h1>content4</h1>
<h1>content5</h1>
<h1>content6</h1>
<h1>content7</h1>
<h1>content8</h1>
</div>
</div>
<div class="right_sidebar col-sm-3 hidden-xs">
<p>Right Sidebar</p>
<ul id="list">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
<li>list5</li>
<li>list6</li>
<li>list7</li>
<li>list8</li>
<li>list9</li>
<li>list10</li>
</ul>
</div>
</div>
</div>
</body>
</html>
.sidebar {
display: none;
}
.main {
background-color: green;
}
@media screen and (min-width: 768px) {
.left_sidebar {
background-color: yellow;
position: fixed;
top: 0;
bottom: 0;
left: 0;
display: block;
overflow-x: hidden;
overflow-y: auto;
}
.right_sidebar {
background-color: yellow;
position: fixed;
top: 0;
bottom: 0;
right: 0;
display: block;
overflow-x: hidden;
overflow-y: auto;
}
ul#list li {
margin-bottom: 30px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.