In Sass, how do we assign height based on a width's value?

Question

I'm trying to assign a value for an element's height based on the width value of a browser. For example (what I'm trying to accomplish is in between the double slash)...

.myDiv {
  width: 35%;
  height: // width * 1.61 //;
}

How can this be done?

I doubt this can be done with SASS specifically, since we won't know what 35% computes to until the page is rendered. But this might help:http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout/6615994#6615994 — Julian, Feb 04 '14 at 22:14
@cimmanon, it's not a duplicate. My question pertains to SASS. — ayjay, Feb 05 '14 at 16:27
@ayjay So Sass doesn't compile to CSS anymore? Sass has to be compiled to CSS before the browser sees it. How do you figure Sass is going to know what the width of a particular element is? — cimmanon, Feb 05 '14 at 16:33
@cimmanon, I was figuring out a way to use SASS's math capabilities. But I guess, that wont' work now that I think about it. — ayjay, Feb 05 '14 at 18:13

score 2 · Answer 1 · edited May 23 '17 at 12:33

2

FYI:

Using percentage value for the width property refers to the width of the container block while the page is rendered.

While for the height property:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
- MDN.

So even if you could achieve this with SASS, It doesn't work properly on the browser.

There are couple of solutions on SO, to keep the aspect ratio of a box:

edited May 23 '17 at 12:33

Community

1
1

answered Feb 04 '14 at 22:16

Hashem Qolami

97,268
26
150
164

So you answer with a non-answer? No. – Julian Feb 04 '14 at 22:17
1

@Julian Technically, the answer is correct: you can't do it with the height attribute. However, it doesn't answer the question (which is a duplicate anyway). – cimmanon Feb 04 '14 at 22:18
@cimmanon I removed my downvote, but I think "there is no answer" should be put in comments, not as an answer. We both pointed out answers that actually solve the problem - maybe not in the way OP envisioned, but should help more than this "answer." – Julian Feb 04 '14 at 22:21
It doesn't answer the question, but it could help to point the OP in a right direction. I posted this to mention the spec, which I couldn't explain by a comment. – Hashem Qolami Feb 04 '14 at 22:29
@HashemQolami Duplicate questions should be closed as duplicates. – cimmanon Feb 05 '14 at 13:49
@cimmanon And I voted to close the question. But none of those answers have explained the issue of using percentage unit. – Hashem Qolami Feb 05 '14 at 13:50

score 2 · Answer 2 · answered Feb 04 '14 at 22:28

2

You could apply padding-bottom as a percentage. Then put an element inside the div with position absolute.

answered Feb 04 '14 at 22:28

Nathan Dawson

18,138
3
52
58

score 1 · Answer 3 · answered Feb 04 '14 at 23:09

Why can't you just do this?

.myDiv {
  $width: 35%;
  width: $width;
  padding-bottom: ($width * 1.61)
}

Of course you'll need to make sure that .myDiv is positioned relative to the page, so in other words not contained inside another element with a position attribute.

As @NathanDawson suggests, you could also put another DIV inside myDiv and set the height to 100% if you need a proper height.

In Sass, how do we assign height based on a width's value?

3 Answers3