I'm working on the layout for a website and I've run into a bit of a problem with the height of one element. I need it to fill what's left of its parent element after another element of a fixed size (64px) is drawn, but I can't figure out any way of doing this and Google isn't helping.
Is there any way of doing something like:
[code]
.container1
{
height:100%-64px;
}
[/code]Thanks in advance for any help with this problem.
i'm confused,
can't you just do 100%?
worst case scenario, use javascript
I would use 100%, but I have another element in there that has a height of 64px. For some reason it ignores it and ends up being 64px too long.
Sounds like a position screw up, relative probably
I've been drinking, so I'm trying to picture this.
Can you post it online?
Even message me, I'll figure it out
You can't do 100% then add or subtract another value. I truly wish you could, but you can't. Use javascript to modify it after loading.
css expressions
[QUOTE=cas97;22278025]css expressions[/QUOTE]
Ahahhahha... No.
You should never use css expressions. They're only for IE.
[url]http://msdn.microsoft.com/en-us/library/ms537634(VS.85).aspx[/url]
[quote]Dynamic properties (also called "CSS expressions") are no longer supported in Internet Explorer 8 and later[/quote]
If you are just trying to get rid of 64px from the height every time, couldn't you use padding:-64px?
Does the 64px element have to be in the parent? Could you put it before it?
If that's not an option, you could try some padding and minus margin tweaks.
You could use CSS3 calc eventually.
height: calc(100% - 64px);
But it's only supported in Firefox trunk builds, and not for certain types (percentages being one of them)
For current browsers, try margin-bottom: 64px; or margin-bottom: -64px;,they should provide the something similar.
Yeah you want a negative bottom margin to do this.
Sorry, you need to Log In to post a reply to this thread.
