...

View Full Version : 100% height! yay!



jo9100
11-09-2008, 04:52 AM
i've been trying back and forth on this page for hours
( http://sheets.rowik.net/ )

you see i want two columns, one footer, one header. the thing is the columns aren't full height...

the footer is already using the wrap's position:relative to be at wrap's very bottom, and not at viewport's bottom. I tried putting another pos:rel. in #middle (middle=two columns) and bottom:0 out the columns, but the columns actually went up instead of down.

how do you extend these two columns to the bottom? i went to see many online examples, but they usually don't really extend the middle part to the bottom.

Millenia
11-09-2008, 10:15 AM
i've been trying back and forth on this page for hours
( http://sheets.rowik.net/ )

you see i want two columns, one footer, one header. the thing is the columns aren't full height...

the footer is already using the wrap's position:relative to be at wrap's very bottom, and not at viewport's bottom. I tried putting another pos:rel. in #middle (middle=two columns) and bottom:0 out the columns, but the columns actually went up instead of down.

how do you extend these two columns to the bottom? i went to see many online examples, but they usually don't really extend the middle part to the bottom.

Have you tried


height: 100%;OR

Put your footer as


height: 10%;and your colums at


height: 90%;

abduraooft
11-09-2008, 02:40 PM
Have a look at http://bonrouge.com/2c-hf-fluid.php.
(You may have to adopt some faux column method (http://www.alistapart.com/articles/fauxcolumns/) also.)

jo9100
11-09-2008, 08:05 PM
Have a look at http://bonrouge.com/2c-hf-fluid.php.
(You may have to adopt some faux column method (http://www.alistapart.com/articles/fauxcolumns/) also.)

isn't there any more natural way of doing it? i am trying to avoid images as best as i can...

Millenia
11-09-2008, 08:23 PM
isn't there any more natural way of doing it? i am trying to avoid images as best as i can...

None of those methods use images. Fluid layout and Faux columns don't need images, just pure CSS.

jo9100
11-10-2008, 01:01 AM
None of those methods use images. Fluid layout and Faux columns don't need images, just pure CSS.

actually, if you check well, the fluid layout uses an image to imitate a longer column while the sidebar is in fact much shorter:


#wrap {
background:transparent url(bg200.gif) repeat-y scroll left top;
margin:auto;
min-height:100%;
position:relative;
}


the faux column also uses an image, and i quote

The embarassingly simple secret is to use a vertically tiled background image to create the illusion of colored columns.

twodayslate
11-10-2008, 01:41 AM
http://www.xs4all.nl/~peterned/examples/csslayout1.html
http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html
LMK if this is helps...

jo9100
11-10-2008, 01:47 AM
http://www.xs4all.nl/~peterned/examples/csslayout1.html
http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html
LMK if this is helps...

the content div in the first is in fact much shorter than they look like. with columns it all becomes screwed up...

and for the second, theres just no header or footer so theres no problem at all

anyway, thanks for trying to help :thumbsup:

twodayslate
11-10-2008, 02:01 AM
do the margin-bottom: -2000px; padding-bottom: 2000px; hack?
overflow of main div has to be none though

really fast non-working example...


<div container overflow:none; bg#000;>
<div right float:right; margin-bottom: -2000px; padding-bottom:2000px; width: 190px; bg:#fff>
sidebar
</div>
<div left margin-right:200px; float: left;>content</div>

<div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum