Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Combining % height and px height

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #43952
    nickabbott
    Member

    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

    #130956
    pixelgrid
    Participant

    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

    #130966
    nickabbott
    Member

    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

    #130967
    nickabbott
    Member

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

    #130962
    Paulie_D
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.