Hi,
Late to the party but…
Fixed elements are a bad idea if you want mobile support as support is sketchy to say the least and only the latest iphones I believe support it.
If mobile is not important then you can do what you want but you will need to provide a scrollbar to your fixed element because content that falls outside the viewport is unreachable when in a fixed positioned element. Fixed elements are always related to the viewport and not the element they sit in.
Note also that your Content div cannot be both min-height:100% and height:100% as all you get is height:100% and no growth i.e. content will spill out once 100% was reached. So what you need is min-height:100% only and will only work as long as there is no nesting because the percentage needs to be based on the body elements fixed height of 100%.
The code would look like this.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css.css">
<title>demo</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, * {
padding: 0;
border: 0;
margin: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
font-size: 100%;
font-family: 'Open Sans', sans-serif;
height: 100%;
}
body {
background: #fff;
color: #222;
font-family: 'Open Sans', sans-serif;
line-height: 1.6em;
font-size: 16px;
height: 100%;
}
#sidebar {
width: 260px;
color: #888;
position: fixed;
padding:0 20px;
top:0;
bottom:0;
overflow:auto;
}
#footer {
position:absolute;
bottom:0;
font-size: 13px;
color: #ccc;
}
#content {
width: 600px;
min-height: 100%;
padding: 0 30px;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
margin-left: 300px;
}
#content p { margin: 0 0 10px 0; }
blockquote {
margin: 20px 0 0 0;
border-left: 1px solid #555;
padding-left: 10px;
font-size: 0.8rem;
}
#sidebar ul {
list-style: none;
font-size: 1.2rem;
padding: 0 0 50px;
margin: 150px 0 0;
}
#sidebar ul li { padding: 3px 0; }
#inner {
min-height:100%;
position:relative;
}
</style>
</head>
<body>
<div id="sidebar">
<div id="inner">
<h1 id="logo">LOGO HERE</h1>
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
<p id="footer">A line of text in the sidebar.</p>
</div>
</div>
<!-- /sidebar -->
<div id="content">
<p>Main content here.</p>
<p>This col has left and right 1px borders which should extend full-height.</p>
<blockquote>
<p>The 'a line of text' at the foot of the sidebar should remain approx 10px from the bottom of the browser window, even when it's resized smaller - and thus trigger a scrollbar.</p>
<p>Currently it doesn't, and with a sufficiently-small browser window it'll overlap the content above it. (I think the positioning should be relative to its enclosing div, but I don't know if this can be done with css.)</p>
</blockquote>
<blockquote>
<p>The 'a line of text' at the foot of the sidebar should remain approx 10px from the bottom of the browser window, even when it's resized smaller - and thus trigger a scrollbar.</p>
<p>Currently it doesn't, and with a sufficiently-small browser window it'll overlap the content above it. (I think the positioning should be relative to its enclosing div, but I don't know if this can be done with css.)</p>
</blockquote>
</div>
<!-- /content -->
</body>
</html>
You can remove the overflow from the sidebar but then when the browser height is too small the content will be unreachable.