Problem with 100% height and fixed position

HTML & CSS
1

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



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



<!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.

2

Here is a definitive guide to height: 100%:

For the rest of it, CSS isn’t well suited for things like this, so you usually end up getting in trouble. Perhaps address the height issue first, though.

3

Thanks.

Having now made what I believe to be the required corrections to sort the height, can the other requirement be met?

4

Are you able to post a link to what you have so far?

5

Thanks. There’s a simple demo at http://glvr.com/test/1/.

6

Perhaps you could put some bottom padding on the sidebar so that the text can’t overlap other sidebar stuff. It would be good if the example demonstrated the problem. Does the problem occur when there’s a lot of text on the left?

7

Padding the sidebar won’t help as that text is in the sidebar. (I’ve modified the example to make that clear, without looking at the source.)

And I tried padding the text element and any above - again no effect, as it just slides up and over when the browser is reduced (granted, it’s not likely to happen in normal use but I want to prevent the possibility).

That demo page does show the problem - just reduce the browser height and watch that text move up… which is probably what the css is meant to do in keeping it x px from the bottom of the viewport.

And it occurs regardless of how much is in the sidebar - which isn’t designed to have more than a logo/strapline, navlgation (now added in that example), and that line of text (which would instead be icons for rss/Twitter/Facebook/ShareThis).

8

OK, probably a better way to go here would be to use the “sticky footer” method detailed here:

9

Thanks.

Unfortunately (for me), having tried to adapt for a fixed sidebar I don’t think that’ll work or provide the required effect of having the required element (line of text, social icons) fixed to the lower left corner of the browser window regardless of browser height.

10

There’s probably a way to do what you want. This would be a good question for @Paul_O_B or @Rayzur, two resident experts. :slight_smile:

11

Thanks. I’ve had huge help from Paul on several occasions previously - and wish I understood css as well as he clearly does.

But I dont. And, in view of other issues with this layout - some divs ‘submarine’ (probably a z-index thing) under others when resized on iPhone, and the fixed sidebar hiding content on small resolutions - I’ll abandon it (at least for now) and revert to something I can better understand. A pity, I like the minimalism of it. (The original, of which I’d wanted a simpler variant, is svbtle.com.)

12

I think that’s a good idea for now. CSS / web browsers just can’t do everything we may want at this stage. It keeps life simpler to work within the common limitations of the technology. In the end, what counts is not layout but content, its organization and its ease of access.

PS - you basically have what the svbtle site has, except that they don’t have any text in the upper left column, but just a logo that covers the text.

13

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.