Jump to content


Photo
- - - - -

Height of content area


  • Please log in to reply
15 replies to this topic

#1 nickvdt14

nickvdt14

    Member

  • Members

  • 29 posts
  • LocationSouth Africa
  • Framework Version:DMS Pro
  • Country: Country Flag

Posted 06 September 2013 - 01:47 PM

I managed to find an old topic similar to what I'm looking to achieve, but wasn't sure if it'd still apply to DMS.

 

Some of my pages do not have enough content to fill up the screen height. And in these cases the footer appears in the middle of the screen with white underneath. I'd like the footer to be stuck to the bottom of the page in these instances. 

 

Any help would be much appreciated!



#2 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 06 September 2013 - 02:29 PM

Hi @nickvdt14 - I think a similar way to accomplish this in DMS would be to add the following custom CSS. Let is know if that does the trick!

 

#page-main {min-height: xxxpx;}



#3 nickvdt14

nickvdt14

    Member

  • Members

  • 29 posts
  • LocationSouth Africa
  • Framework Version:DMS Pro
  • Country: Country Flag

Posted 06 September 2013 - 06:27 PM

Hey Jake!

 

Apologies, I don't think I explained it properly. I want the page to size to the browser window, so that if the content isn't longer than the height of the page the footer won't be stuck in the middle of the page with a white blank space underneath.



#4 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 06 September 2013 - 07:56 PM

Hey @nickvdt14 - gotcha. That's a bit more complicated but have a look over here http://www.cssstickyfooter.com/ to point you in the right direction!



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 September 2013 - 09:23 PM

Add this sort of CSS and adjust accordingly:

 
#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:300px;
   width:100%;
}


#6 nickvdt14

nickvdt14

    Member

  • Members

  • 29 posts
  • LocationSouth Africa
  • Framework Version:DMS Pro
  • Country: Country Flag

Posted 07 September 2013 - 08:40 AM

Thanks guys! The footer is sticky now, but it's still getting pushed to the middle of the page with a white gap underneath on pages without much content.



#7 nickvdt14

nickvdt14

    Member

  • Members

  • 29 posts
  • LocationSouth Africa
  • Framework Version:DMS Pro
  • Country: Country Flag

Posted 07 September 2013 - 09:17 AM

Also, the footer is in the same position on each page, stuck around the middle of the page slightly more towards the bottom.



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 September 2013 - 09:44 PM

I think you're going to need a developer's help for this. DMS isn't designed to work with sticky footers.  The CSS solution was an attempt to help, but honestly, I'm not a programmer.

 

The problems you're experiencing are possibly caused by a plugin.  Can we have a link to the site?



#9 nickvdt14

nickvdt14

    Member

  • Members

  • 29 posts
  • LocationSouth Africa
  • Framework Version:DMS Pro
  • Country: Country Flag

Posted 08 September 2013 - 05:50 AM

That's no problem! You guys support is always top notch :) 

 

http://dreamerphotos.com/nightlife/  <--- normal page

 

http://dreamerphotos...nfo/bio-calvin/  <--- page without a lot of content

 

The footer doesn't have to be sticky, just thought that'd be the best way to get it to stay at the bottom of the browser window for pages that don't have much content. It's also quite possible I broke something with some inelegant custom code that I added.



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 15047 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 September 2013 - 09:21 AM

Hi,

 

To my knowledge, you won't be able to achieve a sticky footer without the use of a hook. You will probably need to use filters too. Its more complex than you think. You will need to most likely, empty your footer and use a hook that is outside of the #site div. Then you can use CSS to accommodate your sticky footer. 

 

If you're unsure how to achieve this, I think the best course of action would be to contact one of our third party developers.



#11 nickvdt14

nickvdt14

    Member

  • Members

  • 29 posts
  • LocationSouth Africa
  • Framework Version:DMS Pro
  • Country: Country Flag

Posted 08 September 2013 - 11:37 AM

Would achieving this be easier than creating a sticky footer?

 

http://www.cssreset....-page-with-css/


  • sheilahoff likes this

#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 15047 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 September 2013 - 11:39 AM

I haven't tried that, give it a go and see how it works, regardless of the outcome reply here and let us know.



#13 nickvdt14

nickvdt14

    Member

  • Members

  • 29 posts
  • LocationSouth Africa
  • Framework Version:DMS Pro
  • Country: Country Flag

Posted 08 September 2013 - 11:40 AM

Okay sure! Will give it a run.



#14 sheilahoff

sheilahoff

    Advocate

  • Members

  • 382 posts
  • LocationSeattle
  • Framework Version:DMS
  • Country: Country Flag

Posted 09 September 2013 - 01:50 PM

Looks like that worked! Please share exactly what you did that made this work in DMS! Congrats!



#15 nickvdt14

nickvdt14

    Member

  • Members

  • 29 posts
  • LocationSouth Africa
  • Framework Version:DMS Pro
  • Country: Country Flag

Posted 09 September 2013 - 01:56 PM

Hey again!

 

Didn't manage to get the footer to stay at the bottom without it becoming sticky, but managed to make it stick at the bottom, which I'm happy with. I think Rob's code works fine, it's just that when I was in editor mode it didn't look like it had worked. You have to turn off editor mode to be able to see it. I was dumb and never bothered to check on a different computer until later.

 

Here's the code I added, of course just ignore the shadow bit.

 

 

html,body
{
  height: 100%;
  padding: 0px;
  margin: 0px;
}
 
footer {
position: fixed;
bottom: 0;
width: 100%;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.25);
}
 
Hope this helps someone else in the future!


#16 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 10 September 2013 - 03:37 PM

Great!