Grow your CSS skills. Land your dream job.

Need a solution to fix a problem of height.

  • # July 9, 2013 at 11:08 am

    Hello all,

    I hope you all are fine as this is my first discussion here and i would be happy if i get a solution to fix my problem.

    I am working for one of my freelancing project and the thing is i am getting a problem with a middle division. as its affecting it with footer so how can i set my middle (wrapper) dynamically…

    can any one please help me with this. What CSS can i use instead of height.

    # July 9, 2013 at 11:11 am

    without any code, it is difficult to guess troubles you’re dealing with :)

    # July 9, 2013 at 11:14 am

    Looks like you need sticky footer solution. Google is your friend for that or search on here.

    # July 9, 2013 at 11:17 am

    `

    this div is with 100% width

    wrapper which stays in the middle

    footer is in 100% width

    `

    this is my code so i wont be able to use fix height as all site pages are dynamic height so when can i use instead of height in middle-wrap class to fit footer just below the wrapper division.

    # July 9, 2013 at 11:19 am

    width:100%; is defaut behavior of blocks wich are static or relative . This bit doesn’t help you. We still do not guess what is your situation.

    # July 9, 2013 at 11:25 am

    **sorry ignore my previous comment

    now what CSS should i use to avoid height and not affect on footer division.
    **

    # July 9, 2013 at 11:26 am

    We still don’t understand what you want the footer to do.

    Should it always be at the bottom of the page regardless if the height of the content?

    # July 9, 2013 at 11:38 am

    Best I can tell if your footer is affecting your div that is not in the footer, then you need to separate the two. If you want a fixed footer on every page as Paulie_D asked then put it in its own footer div and give it a; position: fixed; and set your ‘top’ and ‘left’ properties accordingly. Then your footer will be constant and your main content can change. as far as height goes, make sure your using the box model correctly with your padding and margins then say either height: (insert px, em, or %), or max-height: (insert px, em, or %). I hope this helps. As a new poster like yourself I find it very helpful to use codepen and link to your problem page if possible so that people understand your question better.

    # July 9, 2013 at 11:44 am

    Sticky footer can also work…no positioning required.

    http://codepen.io/chriscoyier/pen/uwJjr

    # July 10, 2013 at 1:16 am

    Thank you so much for your special comments i appreciate it.. i will try with sticky footer so if i use this does my middle portion will be dynamic? how ever my middle portion will be increased or decreased footer will also stay with it???

    # July 10, 2013 at 1:49 am

    **here is my code **

    This is a fixed header

    WITH 100% WIDTH

    with fixed width content

    # July 10, 2013 at 6:01 am

    Please try using Codepen to demonstrate your HTML & CSS.

    I believe that we have already given you the answers you need.

    # July 10, 2013 at 8:39 am

    Hi,

    Check out the code below

    [fixed footer…](http://codepen.io/gowda24/pen/ohCFn “fixed footer”)

    When no content, the footer sticks to bottom.
    When content added dynamically, and then height grows, as height given as auto, but
    the footer remains at t bottom.

    # July 10, 2013 at 10:29 am

    This is a sticky footer and we’ve already given you an example.

    # July 11, 2013 at 6:38 am

    hello guys thank you so much for your help and it is solved now with sticky footer….

    **Thank you so much :)**

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".