Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting CSS values based on another value

Tags:

css

I have a div that I want to set the height of to 1/2 the height of another div. Is there a way I can say something like height: 50% of height of divid1;

like image 548
sameold Avatar asked Aug 01 '11 09:08

sameold


People also ask

What is dynamic CSS?

This is a collection of methods which give you the ability to query the stylesheets collection in a document, add and remove rules, and dynamically create new sheets.

How do you assign a value in CSS?

The basics. To declare a variable in CSS, come up with a name for the variable, then append two hyphens (–) as the prefix. The element here refers to any valid HTML element that has access to this CSS file. The variable name is bg-color , and two hyphens are appended.

How do you pass dynamic value to style in HTML?

color = "red"; you can apply the style change dynamically. Below is a function that turns an element's colour to red when you pass it the element's id . You could also use setAttribute(key, value) to set a style on an element. For example, you could set the colour of an element to red by calling element.

Are CSS variables global?

First of all: CSS variables can have a global or local scope. Global variables can be accessed/used through the entire document, while local variables can be used only inside the selector where it is declared.


2 Answers

With plain CSS there is no way you can do this. You'll have to use e.g. JavaScript to accomplish this.

like image 93
dertkw Avatar answered Sep 30 '22 14:09

dertkw


One method is to use Javascript:

document.getElementById('divid2').height = Math.floor(document.getElementById('divid1').height/2);

Or calculate half of the height of divid1 if the value is static.

like image 23
Qasim Avatar answered Sep 30 '22 12:09

Qasim