Left div and footer as positon-fixed are not working properly

HTML & CSS
1

Hi,

I am trying to fix left div and footer as position fixed and on scroll left dive and right div content should scroll accordingly, in my case my left div and footer got fixed but on scroll my left div content is not scrolling up and down as per image attached here…

I dont want to give overflow-y: auto to sidebar it should scroll on windows scroll, and footer should be always be fixed in bottom only…

HTML:
<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">	
					 ht ht 
				</div>
            </div>
        </div>
	</div>
<div class="col-md-12 footer"> ht ht </div>

CSS:
#wrapper {
	height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    width: 100%;
}
#sidebar-wrapper {
	height: 100%;
    padding: 0px;
    position: fixed;
    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:#ffffff;
	bottom:0;
  	position:fixed;
    padding:10px 0px;
	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;
	}
}

1349×693 27.2 KB

your early reply appreciated…

2

Fixed positioning means the element will not scroll with the document. Any content in a fixed positioned element that is outside the viewport is unreachable.

The only way to have content in a fixed positioned element that is taller or wider then the viewport is to make sure the element fits the viewport and has its own scroll bar.

3

Is there any other way around to fix left div and footer, please suggest any link for reference…

4

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.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.