In a two-column layout with 100% height and a fixed non-scrolling sidebar, I've two issues:

1 I'm not sure that I've used the right css for 100% height.

2 I want to fix the position of an element (a single line of text) to almost the foot (probably about 10px) of the sidebar. I've certainly used incorrect css for this, because if the height of the browser is reduced it moves up and overlaps the content above.

Here's the basic code...

CSS

Code:
html
{
height: 100%;
}



body
{
background: #fff;
height: 100%;
}


#sidebar
{
position: fixed;
width: 260px;
padding: 20px;
}


#sidebar #footer
{
position: fixed;
bottom: 10px;
}



#content
{
width:  600px;
min-height: 100%;
padding: 0 30px;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
margin-left: 300px;
}


HTML

Code:
<!DOCTYPE html>
<html>

<head>
</head>

<body>

<div id="sidebar">

<h1 id="logo">LOGO HERE</h1>

<p id="footer">A line of text.</p>

</div><!-- /sidebar -->


<div id="content">

<p>Main content here. This col has left and right 1px borders which should extend full-height.</p>

</div><!-- /content -->

</body>

</html>
Help appreciated - please and thanks.