Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centred DIV 100% height (ruby site+other developers code)

    Hi guys, sorry to drop in here as my first post but I'm quite desperate to resolve an issue I'm having...

    So, I'm working on a website which is built using ruby, scss and, obviously HTML. So it's a little daunting to say the least, as it's the first time I've worked on such a complex website.

    The issue I'm having is that I need a div to be centrally aligned and to stretch to the bottom of the page. It sits underneath a header element so needs to not sit over the top of that.

    I'm finding that currently I can only achieve a slightly botched temp fix by using the using absolute positioning and setting the height to 82% because anything over and it starts stretching the page larger than it needs to be. It also covers up the footer which is quite annoying...

    because there's so much dynamic content I'm not sure the best way to go about showing you how it's all coded.. so some snippets and a screenshot will do for now - if you need any more information, just ask and I'll get it

    If anyone can help I would be really, really grateful.


  • #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    As you say it's hard to say with no idea about your structure.
    Does your header et footer have a fixed height ? What you can do with an absolute position is to define the top and the bottom property with no height specified. This can make you sure to take all the place and not covering the footer or header.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, thanks for the reply!

    Yes, the header and footer are both fixed heights.

    body > header, #wrapper > header {
    height: 110px;
    width: 100%;
    background: url("../assets/common/header_bg.png") repeat-x scroll 0px 0px transparent;
    position: relative;
    box-shadow: 0px 0px 6px 0px rgb(136, 136, 136);
    }

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
    }

    #footer-wrapper {
    clear: both;
    background: none repeat scroll 0% 0% rgb(241, 241, 241);
    color: rgb(0, 112, 133);
    width: 100%;
    height: 36px;
    }

    Hope that is of some help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •