Can a property's value be set according to another property of the same element?

Issue

I want to set the padding-bottom property of an element like this:

padding-bottom: 100% - height;

where height is the height of the object which I'm going to set it's padding-bottom. I'm not changing the height and it will be automatically set according to the contents of my element.

For example given the properties of element elemID:

#elemID {
    margin: 10px;
    border: 2px solid #111;
}

How can I set it's padding-bottom according to it's height and more generally how can I access "the value" of other properties of an element in CSS.

I saw this question but it's not what I want as in my case the value of height can't be predicted and I don't want to use variables but properties. I know that this problem can be solved in JS but I want to know if there is a way to solve it in CSS?

Solution

The answer, sadly, is no. The cascading style sheet language offers no way to reference properties on elements. Variables are the best native CSS work-around, but you already said that won't do. JavaScript will be the best and easiest way to get a "dynamic" reference to height.

Here's a reference to a similar question asked where the answer kind of addresses yours. The solution was to use SASS and have a list of potential heights that could fit, however that doesn't really answer your question. I thought I'd leave it for reference, though:

Creating or referencing variables dynamically in Sass

Answered By - lua_python_java