Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS width/height pixel and percentage calculation combintaion?

Tags:

css

pixels

Is there a way to set the height/width CSS properties to something like that: 100% - 50px So if the total 100% is 1000px, then the end result would be 950px. And the 100% is set by the browser size.

UPDATE: What I'm trying to do is:

I have two div, the first div's height is 50px, I would like the second div's height to cover the remaining space.

like image 900
thedp Avatar asked Dec 25 '09 13:12

thedp


People also ask

Can the width and height CSS properties accept percentage values?

The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width , height , margin , padding , and font-size .

How do you calculate percentages in CSS?

In CSS, many properties that take a percentage as parameters such as padding, width, height, margin, and font-size. It takes a number as parameter followed by percentage sign(%).


1 Answers

There is a solution in css3, and I also actually think it has been supported in IE for sometime.

Example:

width: -moz-calc(25% - 1em);

See http://hacks.mozilla.org/2010/06/css3-calc/

like image 75
patricjansson Avatar answered Sep 30 '22 12:09

patricjansson