You’d need to set a fixed height for the footer and then you can set the sidebar height with top and bottom rather than using height so that you can start at say something like bottom:2em to avoid the footer.
Here’s an example.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#wrapper {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
width: 100%;
}
#sidebar-wrapper {
padding: 0;
position: fixed;
left:0;
top:0;
bottom:2em;
border-right: 1px solid #ddd;
z-index: 1000;
}
#sidebar {
position: relative;
height: 100%;
overflow-y:auto;
}
#main-wrapper {
height: 100%;
padding:0px;
}
#main {
position: relative;
height: 100%;
padding:0px;
}
#sidebar .list-group-item {
border-radius: 0;
border-left: 0;
border-right: 0;
border-top: 0;
}
.footer {
background-color:#f9f9f9;
bottom:0;
left:0;
right:0;
height:2em;
line-height:2em;
padding:0 10px;
overflow:hidden;
position:fixed;
border-top:1px solid #ddd;
}
@media (max-width: 992px) {
body {
padding-top: 0px;
}
}
@media (min-width: 992px) {
#main-wrapper {
float:right;
}
}
@media (max-width: 992px) {
#main-wrapper {
padding-top: 0px;
}
}
@media (max-width: 992px) {
#sidebar-wrapper {
position: static;
height:auto;
max-height: 300px;
border-right:0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar-wrapper" class="col-lg-2 col-md-6 col-xs-12">
<div id="sidebar">
<div class="col-xs-12 col-sm-12 mb20"> <img class="profile-image" src="primage.png"> </div>
<h3>General Information</h3>
<ul class="profile-details">
<li>
<div><i class="fa fa-building-o"></i> Party Name</div>
Congress </li>
<li>
<div><i class="fa fa-briefcase"></i>position</div>
Party President </li>
<li>
<div><i class="fa fa-briefcase"></i>Winner</div>
Rank No.1 </li>
</ul>
<h3>Contact Information</h3>
<ul class="profile-details">
<li>
<div><i class="fa fa-phone"></i> phone</div>
+91 022 28106240 </li>
<li>
<div><i class="fa fa-tablet"></i> mobile phone</div>
+91 9819046204 </li>
<li>
<div><i class="fa fa-envelope"></i> e-mail</div>
Rahul@rediffmail.com </li>
<li>
<div><i class="fa fa-map-marker"></i>current address</div>
B-301,Akansha Tower<br>
Naya Nagar, Mira Road - E<br>
Dist. Thane - 401107. </li>
<li>
<div><i class="fa fa-map-marker"></i>permanent address</div>
B-301,Akansha Tower<br>
Naya Nagar, Mira Road - E<br>
Dist. Thane - 401107. </li>
</ul>
</div>
</div>
</div>
<div id="main-wrapper" class="col-lg-10 col-md-6 col-xs-12 pull-right">
<div id="main">
<div class="col-lg-12">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget molestie tellus. Praesent magna nunc, ullamcorper quis tincidunt a, malesuada vel lectus. Sed aliquet nisi eget sapien interdum, vel dignissim ligula consectetur. Proin vestibulum a dolor a facilisis. Praesent luctus rutrum quam at fermentum. Proin vel rutrum orci. Phasellus dolor ligula, aliquam et tortor et, mattis congue tellus. Praesent eget ligula vel magna hendrerit luctus molestie at libero. </p>
<p> Ut tempus maximus mauris, eu laoreet neque consectetur sed. Fusce et ante maximus purus tincidunt ultricies eget sit amet neque. Duis posuere erat varius neque vulputate ultricies. Curabitur vel tempor metus. Duis aliquet lacus nec nunc tincidunt, at pellentesque sapien vulputate. Vestibulum id ante justo. Curabitur faucibus velit dictum, iaculis sem non, commodo erat. Aliquam arcu est, malesuada imperdiet tortor eget, interdum egestas libero. Pellentesque consectetur lorem vitae sapien mattis mattis. Pellentesque sed luctus est. Sed enim urna, euismod sit amet nibh eget, varius eleifend justo. Etiam tristique condimentum nibh eu sollicitudin. Quisque consequat urna non eros eleifend interdum. Vestibulum vel condimentum nisi. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget molestie tellus. Praesent magna nunc, ullamcorper quis tincidunt a, malesuada vel lectus. Sed aliquet nisi eget sapien interdum, vel dignissim ligula consectetur. Proin vestibulum a dolor a facilisis. Praesent luctus rutrum quam at fermentum. Proin vel rutrum orci. Phasellus dolor ligula, aliquam et tortor et, mattis congue tellus. Praesent eget ligula vel magna hendrerit luctus molestie at libero. </p>
<p> Ut tempus maximus mauris, eu laoreet neque consectetur sed. Fusce et ante maximus purus tincidunt ultricies eget sit amet neque. Duis posuere erat varius neque vulputate ultricies. Curabitur vel tempor metus. Duis aliquet lacus nec nunc tincidunt, at pellentesque sapien vulputate. Vestibulum id ante justo. Curabitur faucibus velit dictum, iaculis sem non, commodo erat. Aliquam arcu est, malesuada imperdiet tortor eget, interdum egestas libero. Pellentesque consectetur lorem vitae sapien mattis mattis. Pellentesque sed luctus est. Sed enim urna, euismod sit amet nibh eget, varius eleifend justo. Etiam tristique condimentum nibh eu sollicitudin. Quisque consequat urna non eros eleifend interdum. Vestibulum vel condimentum nisi. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget molestie tellus. Praesent magna nunc, ullamcorper quis tincidunt a, malesuada vel lectus. Sed aliquet nisi eget sapien interdum, vel dignissim ligula consectetur. Proin vestibulum a dolor a facilisis. Praesent luctus rutrum quam at fermentum. Proin vel rutrum orci. Phasellus dolor ligula, aliquam et tortor et, mattis congue tellus. Praesent eget ligula vel magna hendrerit luctus molestie at libero. </p>
<p> Ut tempus maximus mauris, eu laoreet neque consectetur sed. Fusce et ante maximus purus tincidunt ultricies eget sit amet neque. Duis posuere erat varius neque vulputate ultricies. Curabitur vel tempor metus. Duis aliquet lacus nec nunc tincidunt, at pellentesque sapien vulputate. Vestibulum id ante justo. Curabitur faucibus velit dictum, iaculis sem non, commodo erat. Aliquam arcu est, malesuada imperdiet tortor eget, interdum egestas libero. Pellentesque consectetur lorem vitae sapien mattis mattis. Pellentesque sed luctus est. Sed enim urna, euismod sit amet nibh eget, varius eleifend justo. Etiam tristique condimentum nibh eu sollicitudin. Quisque consequat urna non eros eleifend interdum. Vestibulum vel condimentum nisi. </p>
</div>
</div>
</div>
</div>
<div class="col-md-12 footer">Footer with content that stretches across both columns </div>
</body>
</html>
</html>
You will of course need a scrollbar on the sidebar when content is greater than the viewport and also ensure that the footer is never greater than the height you set. That means that having fluid text in the footer that wraps to another line is out of the question.
The fixed elements should be removed for smaller screens etc.