• 0

Height of content area

Question

Posted · Report post

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!

Share this post


Link to post
Share on other sites

15 answers to this question

  • 0

Posted · Report post

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;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Add this sort of CSS and adjust accordingly:

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

 

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

 

http://dreamerphotos.com/info/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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay sure! Will give it a run.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Great!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now