Grow your CSS skills. Land your dream job.

Combining % height and px height

  • # April 7, 2013 at 11:39 pm

    Hi everyone – I hope someone smart can shed some light on a problem that’s bugging me :)

    Basically I have a fixed height header (set at 60px height), then an absolutely positioned div which serves as a column stuck to the left of the screen, below the header.

    I am setting the column to 100% height initially in the CSS with a 60px top value (to allow for the header), but this obviously is 60px higher than it needs to be when combining the 100% and 60px values. I can’t specify in pixels how high the column should be as I don’t know exactly what the browser height must be.

    I’m currently using jQuery and binding a screen resize event as such;

    sizeColumns:function() {
    $(“.column”).height($(“body”).height() – 60);
    }

    Which works, but just seems hacky. Is there any way I can achieve this solely in CSS, by specifying a height as a percentage minus a fixed px value… wouldn’t be surprised if no but wanted to check as my page is full of this type of positioning.

    Thanks!

    Nick

    # April 8, 2013 at 2:18 am

    what you are looking for is the calc css function which can be used like so

    #id{height:calc(100% – (desired amount in px) )}

    keep in mind though that the persentage value is taken from the elements parent,so a nested element cant reference to the body height unless is a direct child or its parent covers the full width

    also the browser support currently is at 72% http://caniuse.com/calc

    # April 8, 2013 at 4:37 am

    Wow that is sweet! Had no idea that existed.

    Shame about the browser support. Might use this with a js fallback – though maybe that will be more stress than its worth.

    Thanks

    # April 8, 2013 at 4:39 am

    Um, is there any way to mark this as answered like in stack overflow? Sorry – first discussion.

    # April 8, 2013 at 5:48 am

    Sorted for you.

    In future, just edit your first post and you’ll find a “Solved” tickbox.

    Tick that and save.

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

You must be logged in to reply to this topic.

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