"stretch" object to bottom of document

[stakadush]

hey..

how can i "stretch" and object to reach the bottom of the page, from it's starting point?
i have a ul object which starts at pixel 145, with a border, and i'd like it to stretch all the way to bottom of the page to make a frame.
my doctype is strict.
i have tried setting the height to 100%, which doesn't make the right effect, and i tried setting the bottom to 0px, which only works in case there's no scrolling.

here's my css:

body
{
	background-color: white;
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	font-family: Verdana;
	font-size: 10pt;
	color: rgb(110, 110, 110);
}

#menu
{
	position: absolute;
	top: 145px;
	left: 50px;
	width: 220px;
	height: 100%;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	clear: both;
	margin-top: 20px;
	border: 1px dotted rgb(73, 57, 21);
	border-bottom: none;
}

#menu li
{
	vertical-align: middle;
	height: 24px;
	line-height: 24px;
	font-size: 1.1em;
	padding-left: 38px;
	color: rgb(73, 57, 21);
	border-bottom: 1px dotted rgb(73, 57, 21);
	cursor: pointer;
}

this is the html:

<ul id="menu">
	<li>Item 1</li>
	<li>Item2</li>
	<li>Item3</li>
</ul>

thanks..

(-:

 

[Vragabond]

Since you're using absolute positioning, this is even harder. Stretching elements the entire height of the viewport with a valid doctype is pretty hard as is, but I believe adding:

html, body {
  height: 100%;
}

Does produce the expected results. However, this does not include absolute positioning with a custom position. I do believe adding [tt]bottom: 0;[/tt] will work in Geckos (and possibly Opera) but not in IE. Other than that, all I could think of is using Javascript to calculate where the bottom of the screen is and apply that value dynamically.

 

[stakadush]

the problem with this solution, of making bottom: 0;, is that it also works until the viewed part...when you scroll down, the border stop...only if there is no scrolling it goes all the way to the end of the actual document.



(-:

 

[Vragabond]

That is what you were limiting yourself to in the first place. 100% of the viewport means 100% of the viewport and viewport is the browser window. If page extends beyond that, then your page is more than 100% of the viewport, right?

 

[stakadush]

ok, i understand that, but is there a solution to make it stretch all the way down in pure css, or am i limited to javascript?


(-:

 

[Vragabond]

In standards compliant browsers (all but IE) you can use [tt]min-height: 100%;[/tt] wherever you use it instead of height. This will work the way you want it to.

IE luckily believes that height is actually min-height so you can fake that in IE too.

 

[stakadush]

i have tried min-height but it has the same effect as height...the element is stretched longer than the document (or document.scrollHeight).
it's as if the browser give it 100% of the documnet+ the 145px, so it becomes longer. if i change it to top: 0px; it works well...



(-:

 

[Vragabond]

I completely agree with the rendered result. Top, left, right, bottom positions work in a way that element is just shifted for the number of pixels to the desired side. Everything else remains relative to its enclosing element. So 100% + 145px is the correct behaviour.

I was actually talking about giving your wrapper min-height: 100%. It should probably work with:

html, body {
  min-height: 100%;
}

but if not, just a relatively positioned div and wrap everything in that.

 

[stakadush]

when either setting the ul to relative, or wrapping it inside a relativly positioned div, it stops stretching...the height is exactly as the size of the ul.

here's what i have now:

html, body
{
	min-height: 100%;
	padding: 0px;
	margin: 0px;
	width: 100%;
}

body
{
	background-color: white;
	font-family: Verdana;
	font-size: 10pt;
	color: rgb(110, 110, 110);
}

#menu_cont
{
	position: relative;
	top: 145px;
	left: 50px;
	width: 220px;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

#menu
{
	width: 100%;
	height: 100%;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	clear: both;
	margin-top: 20px;
	border: 1px dotted rgb(73, 57, 21);
	border-bottom: none;
}

#menu li
{
	vertical-align: middle;
	height: 24px;
	line-height: 24px;
	font-size: 1.1em;
	padding-left: 38px;
	color: rgb(73, 57, 21);
	border-bottom: 1px dotted rgb(73, 57, 21);
	cursor: pointer;
}

(-: