use case for css function calc()

Question

I have the following use case:

#grandparent {
    width: 100%;
}
    
#parent {
    width: calc(100% - 20px);
    height: 268px;
    background-color: white;
    top: 200px;
    position: absolute;
}
    
#child {
    width: 100%;
    height: 100px;
    background-color: green;
    position: absolute;
}

<div id="grandparent"> 
    <div id="parent"> 
        <div id="child"></div>
    </div>
</div>

I want to calculate the css property top of the child with the CSS function calc() that is translated as

top = 184px - width of the parent * (184 / 649)

the fiddle is the following: https://jsfiddle.net/flamant/1sn3e8v4/11/

Not possible with CSS since 100% width is not calculable in px until render. You need JS. — Paulie_D
– Paulie_D, Commented Apr 28, 2020 at 16:36
If you could explain what the actual use case is, i.e. what you are trying to do, we might be able to help/ — Paulie_D
– Paulie_D, Commented Apr 28, 2020 at 16:38

flamant · Accepted Answer · 2020-04-28 17:19:27Z

1

I did a mistake in the formula. The formula is actually

top= 184px - (184px - width of the parent * (184 / 649))

and it is possible with

#child {
  width: 100%;
  height: 100px;
  background-color: green;
  position: absolute;
  top: calc(184px - (184px - (100vw - 20px) * (184 / 649)));
}

answered Apr 28, 2020 at 17:19

flamant

7834 gold badges20 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

use case for css function calc()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related