Hi,
As Ralph said its generally better to have fixed width sidebar rather than a fluid one as it soon gets too small.
However in answer to your question you can do it like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
background:gray;
}
.outer {
min-height:100%;
background:#fff;
margin:0 3% 0 25%;
padding:1px 2em;
}
.sidebar {
position:fixed;
top:0;
bottom:0;
left:0;
width:25%;
background:gray;
overflow:auto;
}
.inner{margin:0 0 0 15%;}
.nav {
margin:0;
padding:0;
list-style:none;
}
.nav li {
margin-bottom: 0.2em;
padding: 0.2em;
}
.nav li:hover { background:#fff; }
.sidebar p {
margin:0 0 1em;
padding: 0.2em;
}
</style>
</head>
<body>
<div>
<header class="sidebar">
<div class="inner">
<h1>Logo</h1>
<ul class="nav">
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
<p>If a sentence is too long then it will not spill over onto the section element</p>
</div>
</header>
<section class="outer">
<h1>This is the section</h1>
<p>Lorem ipsum dolor sit amet, eu mea euismod salutandi. Vix eu semper consulatu vituperata, dolorem perfecto rationibus eos ea, ignota suscipit per an. At vix impetus pericula, has probo delicata accusamus ad, has ei duis putent labore. Eam at error option invidunt, cu exerci interpretaris usu. Maiorum tibique intellegebat an sea. Eum ne amet ignota accumsan, no pri quaeque numquam.</p>
<p>Autem inani lucilius usu ex. Odio dolores ea eos, pri audire admodum blandit cu. Eu eos congue aliquando pertinacia, at modus scribentur reformidans nam. At est mutat aliquid convenire, ei alii explicari sea, invidunt disputationi his ex. In eam quando accusata euripidis, sint commune repudiare his an. Assum referrentur usu ad, affert oporteat consetetur qui no, cu nulla pertinax his.</p>
<p>Quo in persius maiorum menandri, pro no nobis nostrud maiestatis. Nibh luptatum eu mea, consul bonorum necessitatibus an vix. Tale solet percipitur sed et, ut modo tation tantas pro. Homero animal nec te. Consul vocibus epicurei usu cu, corrumpit moderatius contentiones cum ea, lorem laoreet docendi eum eu. Qui facer doctus dolorem cu.</p>
<p>Postulant definitiones eu vis, inermis fuisset scaevola cum ei. Vim ei vide similique vituperatoribus. Eos cu nostrud periculis elaboraret, ea mei labores vivendum posidonium. Ut duo enim definiebas, partem fuisset complectitur vix ne.</p>
<p>Cu bonorum pertinacia honestatis est. Ne eum brute omnium partiendo, magna propriae fabellas ad has, sit solet eripuit equidem id. Vel nostro saperet ponderum ei. Vero nemore mel ex, eum ei nobis labores intellegam, tale suas commodo sit et. An pro noster corrumpit gubergren, sea an sanctus iudicabit, eum tollit convenire necessitatibus ei.</p>
<p>Lorem ipsum dolor sit amet, eu mea euismod salutandi. Vix eu semper consulatu vituperata, dolorem perfecto rationibus eos ea, ignota suscipit per an. At vix impetus pericula, has probo delicata accusamus ad, has ei duis putent labore. Eam at error option invidunt, cu exerci interpretaris usu. Maiorum tibique intellegebat an sea. Eum ne amet ignota accumsan, no pri quaeque numquam.</p>
<p>Autem inani lucilius usu ex. Odio dolores ea eos, pri audire admodum blandit cu. Eu eos congue aliquando pertinacia, at modus scribentur reformidans nam. At est mutat aliquid convenire, ei alii explicari sea, invidunt disputationi his ex. In eam quando accusata euripidis, sint commune repudiare his an. Assum referrentur usu ad, affert oporteat consetetur qui no, cu nulla pertinax his.</p>
<p>Quo in persius maiorum menandri, pro no nobis nostrud maiestatis. Nibh luptatum eu mea, consul bonorum necessitatibus an vix. Tale solet percipitur sed et, ut modo tation tantas pro. Homero animal nec te. Consul vocibus epicurei usu cu, corrumpit moderatius contentiones cum ea, lorem laoreet docendi eum eu. Qui facer doctus dolorem cu.</p>
<p>Postulant definitiones eu vis, inermis fuisset scaevola cum ei. Vim ei vide similique vituperatoribus. Eos cu nostrud periculis elaboraret, ea mei labores vivendum posidonium. Ut duo enim definiebas, partem fuisset complectitur vix ne.</p>
<p>Cu bonorum pertinacia honestatis est. Ne eum brute omnium partiendo, magna propriae fabellas ad has, sit solet eripuit equidem id. Vel nostro saperet ponderum ei. Vero nemore mel ex, eum ei nobis labores intellegam, tale suas commodo sit et. An pro noster corrumpit gubergren, sea an sanctus iudicabit, eum tollit convenire necessitatibus ei.</p>
</section>
</body>
</html>
You wanted a fixed sidebar so use position:fixed and not position absolute. Don’t interfere with html and body scrollbars because that was giving you two scrollbars at some heights.
There is no need to absolutely position the menu inside the fixed navbar. Just let it go with the flow and it will reach the edge automatically. You also need overflow:auto on the sidebar because if content goes below the fold it would be unreachable.
You should add media queries to remove the fixed positioning for smaller devices as they hate fixed positioning and don’t forget the html5 shiv for old IE.
Hope that helps.