Get down and stay down!

ID:1419610
 
Nov 11 2013, 11:44 am
I'm working on a web page and I need some help with... my footer.

You see, the problem here is that if I re-size the window to make it smaller so that the content now scrolls, the footer now moves up and stays there. I rearranged the order of some of the
classes and I came to a conclusion after using inspect elements via google chrome. Uhm.. and appear to be the cause. They get the height: 100%; and their value is stuck on the initial set value. So, if you resize the screen then it won't get the new height. Refreshing doesn't help.

I was wondering, how could I make it that body and html are always truly 100% because the footer sits at the bottom of them but they're not doing what the hell I want them to do and I'm about to throw my chair through the window. q_q

Summary: Is it possible to set the height to be 100% no matter how the window is re-sized?
Nov 11 2013, 12:56 pm
Look into css style sheets you can use them to "lock" the footer tk the bottom of the page. I find it easist to use html+ css for layout and styling of page. Which allows php and javascript to focus on function.
Nov 12 2013, 3:53 am
Yeah, CSS is definitely the way to go on this one. W3Schools has a good reference for HTML as well as CSS.
Nov 17 2013, 1:24 am
if you are doing the layout something similar to this:


<div id="wrapper">
<div id="header"> stuff at the top </div>
<div id="content"> stuff in the middle </div>
<div id="footer"> stuff in the bottom </div>
</div>


there are a variety of ways to make sure the footer DIV stay down on the bottom.

one of the popular ways is add styling to the DIVS like so:


<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}

#wrapper {
min-height: 100%;
position: relative;
}

#header { // whatever styling your header needs to me

#content {
padding-bottom: 80px; // this should match the height of the footer
}

#footer {
width: 100%;
position: absolute;
bottom: 0;
height: 80px;
// other styling here, as needed
</style>


source: http://www.cssreset.com/demos/layouts/ how-to-keep-footer-at-bottom-of-page-with-css/