By fabrikated on

Hello! I'm having an annoying little issue that seems to be plaguing most (not all) of my drupal pages.

I'm in the process of setting up my new website, and if you check out the front page, the table does not extend 100% to the bottom...it kind of cuts off after the footer. Sorry if I'm not being too clear, it's just that it's 3 a.m. and I've been going over the code trying to figure out what's going on.

Any help would be appreciated...I'm sure it's something simple!

LINK: http://community.galvanizeme.com/

NOTE: Page is under serious construction and is in no way representative of how it's going to actually turn out ;)

Thanks,
Noah

⋅ Categories: Drupal 4.7.x

Comments

mokargas’s picture

mokargas commented

Try adding this to the bottom of your styles.css

html, body {
height: 100%;

}

#bw1{ /*or whatever your container div is*/
min-height: 100%;
}

#container { height: 100%; }

mokargas’s picture

mokargas commented

ok that bottom container tag is wrong..it was supposed to paste


html, body {
height: 100%;

}

#bw1{ /*or whatever your container div is*/
min-height: 100%;
}

<!--[if lte IE 6]>
<style type="text/css">
#bw1{
height: 100%;
}
</style>
<![endif]-->
Jeff Burnz’s picture

Jeff Burnz commented

Well...

For one, your site is not built with tables, it's built with div's and CSS, and the reason they are not reaching the bottom of the window is that there is not enough content on those pages to reach the bottom - it's as simple as that.

You may want to look up something called 'faux columns' and similar techniques (liquid faux columns, sliding faux columns etc).

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
mokargas’s picture

mokargas commented

Can still make it reach the bottom though, even with minimal content

Jeff Burnz’s picture

Jeff Burnz commented

Yea of course, frankly the nested div's and CSS scared me off... next time I wont be such a sissy:)

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
fabrikated’s picture

fabrikated commented

Wow, thanks for all of the help! I know where to come when I need help now!

I tried it and it did not work, unfortunately. This is getting pretty frustrating...maybe I should just try a theme that uses tables instead of divs?

Thanks again!

mokargas’s picture

mokargas commented

I didn't have time to look at it properly. Google helps though

This method works for me all the time though, I suggest you give it a read to understand what's going on http://www.communitymx.com/content/article.cfm?cid=BAD95

Oblivious-1’s picture

Oblivious-1 commented

That method won't work as expected in KHTML browsers like Safari.

--
Erik

mokargas’s picture

mokargas commented

LOL you're not a sissy, can't say I have any love for that myself either

mokargas’s picture

mokargas commented

Ok on closer inspection, #bw1 is wrong, should read .bw1 in the css, since in your code it bw1 is a class selector.

Change your css to

html, body {
height: 100%;

}

.bw1{ /*or whatever your container div is*/
min-height: 100%;
}

<!--[if lte IE 6]>
<style type="text/css">
.bw1{
height: 100%;
}
</style>
<![endif]-->
bassplaya’s picture

bassplaya commented

I'm trying to do the same thing here with the fixed zen theme but where to put that code? I've put it in the layout.css file and it doesn't seem to work.. created a page with minimal content and almost no blocks.. footer appears to be in the middle of the screen instead of on the very bottom. I have only modified this in the theme.. so anyone could try this.. please some help.

Authentically,
BassPlaya

bassplaya’s picture

bassplaya commented

here's my code:
in themes/zen/layout.css

/* swapping this code to /themes/zen/zen-fixed/style.css doesn't help neither*/
html, body {
height: 100%;

}
#container {
margin: 0 auto;
/*padding: 0 20px;*/
max-width: 1270px;
min-height: 100%;
}

#squeeze {
position: relative;
padding: 0 1em;
height: 100%;
}
/* absolute position for the footer-wrapper makes the footer appear in the middle of the screen when the content is more than the screen's height so I chose relative, if I don't define the width.. it's very tiny instead of nicely spread over the "fixed" width */
#footer-wrapper {
position: relative;
bottom: 0px;
width: 900px;
}

#footer {
float: none;
clear: both;
margin: 4em 0 -3em;
}

please once and for all... this is a thing that I'm struggling with for almost 2 years now.. I must be really stupid.. any books that you guys can recommend? anyone want to get paid to do this for me? I'll pay.. I just had enough of this crap.. and turning back to tables.. NO WAY.

Authentically,
BassPlaya

cecrich’s picture

cecrich commented

Not sure if this is what you're looking for, but I always use the template that I got off of this website, and it seems to work fine for me:

http://www.xs4all.nl/~peterned/examples/csslayout1.html

Nolza’s picture

Nolza commented

Hello this helped me - Using Zen subtheme

html, body {
height: 100%;
}
#page-wrapper,
.region-page-closure {
/*
* If you want to make the page a fixed width and centered in the viewport,
* this is the standards-compliant way to do that. See also the ie6.css file
* for the necessary IE5/IE6quirks hack to center a div.
*/
margin-left: auto;
margin-right: auto;
width: 960px;
background-color:#FFFFFF;
height:100%;
min-height: 100%;
}

#page-wrapper, .region-page-closure { height: 100%; }

webengr’s picture

webengr commented

Note the above mentioned, need min-height in the div and the enclosing element(s) need height 100%
It it appears to be the solution that works year later also

The above posting seems to work at first try for a recent firefox, chrome and msie:
In the css/layout-fixed.css for a zen sub theme, we wanted the #page-wrapper to go all the way to bottom.
So we tried min-height on that division and 100% height on the enclosing, which is body, but surprisingly html also!
Note, it would not work with body{height:100%;}, had to have html,body{height:100%;} also.

html, body {
height: 100%;
}

#page-wrapper,
.region-bottom {
min-height: 100%;
}

mauro72’s picture

mauro72 commented

I had the same problem , in my case the source of the problem was that the div that wrappers the footer has a clearfix class, so because of the clearfix this extra space was appearing. Finally I change the code for the clearfix hack in the reset.css file. The code I used is this(http://nicolasgallagher.com/micro-clearfix-hack/):


.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}