- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
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
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
Um, is there any way to mark this as answered like in stack overflow? Sorry – first discussion.
Sorted for you.
In future, just edit your first post and you’ll find a “Solved” tickbox.
Tick that and save.