Find the visuals and code on JSbin here.
Looking to create a left sidebar that is full height with a fixed position, yet have its content accessible without scrollbars and no need for overflow: scroll. I'm hoping to achieve this in CSS only, without resorting to JavaScript.
I managed to accomplish this months ago using overflow: hidden along with something else, but now I can't recall the exact code or method. Unfortunately, my attempts at searching through Google have been fruitless. The sidebar has content to the right that extends down the page, while the sidebar itself has more content than can be displayed vertically on the screen.
The challenge is getting the sidebar object to span the full height of the page, even when scrolling down, whether it's set to fixed or absolute positioning. It's crucial that the scrolling behavior between the main content and the sidebar remain independent. So far, setting it to absolute causes the wrapper to stop short of reaching the bottom of the page.
I've experimented with various combinations of position, float, overflow, height/max-height, top, bottom, left, and display, but haven't had much luck so far.
Any assistance or guidance would be greatly appreciated.
CSS:
#left-wrap {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 3;
max-width: 24em;
height: 100%;
overflow: hidden;
background-color: rgba(26,26,26,1);
}
#left-bar {
max-width: 100%;
max-height: none;
position: relative;
}
#left-bar.sidebars .block {
padding: 5%;
border-right: none;
margin: 5%;
background-color: rgba(255,255,238,0.4);
margin-bottom: 1.5em;
font-size: 0.9em;
overflow: hidden;
}
.sidebars .block ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebars h2 {
padding: 0;
margin: 5% 10% 0;
font-size: 1.75em;
text-transform: lowercase;
font-weight: 400;
text-align: right;
/*border-bottom: 1px dashed #9c561b;
color: #9c561b;
text-shadow:#130b08 0 1px 0;*/
}
#left-wrap a {
color: #FDC;
}
HTML:
<div id="left-wrap">
<div id="left-bar" class="sidebars">
<div class="block">
<h2>Title One</h2>
<ul class="menu">
<li>Link One</li>
<li>Link Two</li>
<li>Link Twenty-five</li>
<li>Link Seventy</li>
<li>Link One Hundred Fifty-two</li>
<li>Link Zero</li>
</ul>
</div>
<div class="block">
<h2>Title Two</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod t incidunt ut laoreet dolore magna ali...
</div>
<div class="block">
<h2>Title Three</h2>
<ul class="menu">
<li>Link One</li>
<li>Link Two</li>
<li>Link Twenty-five</li>
<li>Link Seventy</li>
<li>Link One Hundred Fifty-two</li>
<li>Link Zero</li>
</ul>
</div>
<div class="block">
<h2>Title Four</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod t incidunt ut laoreet dolore magna ali...
</div>
<div class="block">
<h2>Title Five</h2>
<ul class="menu">
<li>Link One</li>
<li>Link Two</li>
<li>Link Twenty-five</li>
<li>Link Seventy</li>
<li>Link One Hundred Fifty-two</li>
<li>Link Zero</li>
</ul>
</div>
<div class="block">
<h2>Title Six</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod t incidunt ut laoreet dolore magna ali...
</div>
<div class="block">
<h2>Title Seven</h2>
<ul class="menu">
<li>Link One</li>
<li>Link Two</li>
<li>Link Twenty-five</li>
<li>Link Seventy</li>
<li>Link One Hundred Fifty-tw...
</div>
<div class="block">
<h2>Title Eight</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod t incidunt ut laoreet dolore magna ali...
</div>
</div>
</div>