3 Replies - 722 Views - Last Post: 03 May 2013 - 02:00 PM

#1 MannyG  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 15-April 13

CSS Footer Scaling issue

Posted 03 May 2013 - 12:21 PM

I have a webpage which I created a footer for with my companies logo on it, this web page has a form and when the form data is ready to be submitted will be redirected to another page. This new page will share the same design as the page prior, however I have an issue where the body of text in this page is one sentence (a simple thank you note), and this causes the footer to be scaled up half way across the screen. It look's awful! (Also, not sure why it's side scrolling (slight buffer of white space to the right)).

Here are some screen shot's of what this look's like:

Form page: (issue here is some white space underneath and scroll bar to the right

Posted Image


Re-directed page (coming from form), similar design as you notice it scales really high.

Posted Image


Here is the footer html code:

<!-- footer -->
 <div id="container">
   <div id="head"></div>
   <div id="dbody"></div>
   <div id="foot"><br/>
   <div id="foot-content"><h5>Powered by</h5>
	<a id="someWeb" href="http://www.someWebsite.com">
		<img src="images/logo.png" alt="someAlt"/>
		</a>
	</div>
</div>
</div>



And the CSS for this:

	#container {
	   min-height:100%;

	}
	#head {
	   min-height:100%;
	   padding:10px;
	}
	#dbody {
	   padding:10px;
	   padding-bottom:60px;   /* Height of the footer */
	}
	#foot {
	   min-height:100%;
	   bottom:0;
	   width:100%;
	   height:80px;   /* Height of the footer */
	   background:#353535;
	   min-height:100%;
	}
	#foot-content
	{	
		padding-left:300px;
		margin:0 auto; 
		width:400px;
		min-height:100%;
	}
	a img{
		border: 0px;
	}


As you may notice I blocked out the logo's and input's as I forgot to remove them for the purpose of anonymity. Please bear with the horrible color choice for the fill-in :P

This post has been edited by MannyG: 03 May 2013 - 12:25 PM


Is This A Good Question/Topic? 0
  • +

Replies To: CSS Footer Scaling issue

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3359
  • View blog
  • Posts: 11,373
  • Joined: 12-December 12

Re: CSS Footer Scaling issue

Posted 03 May 2013 - 01:00 PM

I doubt that min-height (and width: 100%;) is behaving as you expect it to. These are determined by their parent element, and do not behave as you might expect if the parent element (or elements) don't have a specified height or width. They are also confused by any margins (or padding), which possibly accounts for the mysterious appearance of the scrollbar. You might want to study this topic :). Your use of padding seems a bit of a hack as well :dontgetit:.

Anyway, you need to decide if you want the footer to stick to the bottom of the viewport: sticky footer. Another approach is position: fixed:

html, body {
    height: 100%;
    width: 100%;
    padding: 0; margin: 0;
    background: blue;
}
#container {
    height: 100px;
    width: 100%;
    text-align: center;
    position: fixed;
    display: block;
    bottom: 0;
    background: green;
}

If, on the other hand, you just want the content to have a minimum height then I would just set this in pixels, and I would (personally) remove a lot of css that you have currently.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3359
  • View blog
  • Posts: 11,373
  • Joined: 12-December 12

Re: CSS Footer Scaling issue

Posted 03 May 2013 - 01:30 PM

This page describes the issues related to (min-)height: 100% quite well. Note that this is less of an issue with width: 100% as, for block-level elements, this is read correctly as the width of the browser (the available space).

This post has been edited by andrewsw: 03 May 2013 - 01:33 PM

Was This Post Helpful? 0
  • +
  • -

#4 MannyG  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 15-April 13

Re: CSS Footer Scaling issue

Posted 03 May 2013 - 02:00 PM

Sticky footer would be what I want to implement, I will try a few thing's and see if they work. If not I will update this thread accordingly :)

Thanks for the tips!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1