# How do I use Wix Code to set 100% height. I WANT % NOT VH

**URL:** <https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994>\
**Category:** Ask the community\
**Tags:** code\
**Created:** [October 10, 2023, 6:00pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994 "2023-10-10T18:00:31Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![cjechurchill](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/cjechurchill/32/10405_2.png) [@cjechurchill](https://forum.wixstudio.com/u/cjechurchill)\
**Post date:** [October 10, 2023, 6:00pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/1 "2023-10-10T18:00:32Z")

</div>

Can someone help me set my hero element to 100% height using custom code?

---

<div class="post-metadata">

**Author:** ![anthony](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/anthony/32/79536_2.png) [@anthony](https://forum.wixstudio.com/u/anthony)\
**Post date:** [October 11, 2023, 2:46pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/2 "2023-10-11T14:46:39Z")

</div>

You can do this without code in Wix Studio. If you select the “…” next to the “Size” section of the Inspector you can turn on advanced sizing:

![image](https://us1.discourse-cdn.com/wix/original/3X/d/4/d48b9853097c71a64dafea87afab244cfa6744e5.png)

Then you can select a variety of different units for height including %.  
 ![image](https://us1.discourse-cdn.com/wix/original/3X/0/2/0267f70892f91a901a9028bbb50e4741d51f766d.png)

---

<div class="post-metadata">

**Author:** ![cjechurchill](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/cjechurchill/32/10405_2.png) [@cjechurchill](https://forum.wixstudio.com/u/cjechurchill)\
**Post date:** [October 11, 2023, 3:08pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/3 "2023-10-11T15:08:30Z")

</div>

% option. is not showing for Sections elements, which is what I need.

 ![Screenshot 2023-10-11 at 16.03.53](https://us1.discourse-cdn.com/wix/original/3X/8/0/800105c83364b416f60ffed15dd85322fbe595d5.png)

---

<div class="post-metadata">

**Author:** ![cjechurchill](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/cjechurchill/32/10405_2.png) [@cjechurchill](https://forum.wixstudio.com/u/cjechurchill)\
**Post date:** [October 12, 2023, 12:52pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/4 "2023-10-12T12:52:52Z")

</div>

Are you part of Wix team? Can you ask your developers to implement this? If you want Wix Studio to be a serious tool for professionals it needs to have features like this.

---

<div class="post-metadata">

**Author:** ![anthony](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/anthony/32/79536_2.png) [@anthony](https://forum.wixstudio.com/u/anthony)\
**Post date:** [October 12, 2023, 2:29pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/5 "2023-10-12T14:29:05Z")

</div>

I see. In this case % height is not shown as the section can be thought of as a div/uppermost container. It doesn’t have anything to be a % of. It needs to be a height either relative to something (like viewport height, which is a % of the total height of the viewport) or an absolute height (like pixels).

However elements within the section can have their height set as a % of the section that they’re in.

For example [here I have a div with another div nested inside](https://jsfiddle.net/anthonywix/w9mu0hxs/9/) of it.

If I set the outside div `#mySection` to `height: 50%` it disappears as it doesn’t have anything to be relative to. However if I set it to `height: 50vh` it shows up.

Then for my `#myNestedElement` I can set it as `height: 50%` because it has something to set its height relative to (ie. `#mySection`).

Can you share a bit more about what you’re trying to achieve here? There’s likely some way to do it.

---

<div class="post-metadata">

**Author:** ![cjechurchill](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/cjechurchill/32/10405_2.png) [@cjechurchill](https://forum.wixstudio.com/u/cjechurchill)\
**Post date:** [October 12, 2023, 2:53pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/6 "2023-10-12T14:53:47Z")

</div>

Here is a design I am working on. Note the bar at the bottom of the design. This whole header section ideally needs to fit perfectly on the screen. However, on IOS, this is not possible without using %. If you use VH, the address bar on IOS overlays the header section so it doesn’t fit perfectly in the browser viewport and it obscures the bar at the bottom of my design. As a result it diminishes the design. Do you see what I mean? I am a perfectionist so I find it frustrating. I know how the structure of websites work (I have come from Webflow). Is there a way to make the parent of the section (the page) 100%? So the section would then be 100% of the page parent? I can do it on Webflow.

 ![Screenshot 2023-10-12 at 15.46.53](https://us1.discourse-cdn.com/wix/original/3X/7/4/74f620ca37f548e0299ec8418efbb72997c5c728.jpeg)

---

<div class="post-metadata">

**Author:** ![cjechurchill](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/cjechurchill/32/10405_2.png) [@cjechurchill](https://forum.wixstudio.com/u/cjechurchill)\
**Post date:** [October 12, 2023, 3:02pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/7 "2023-10-12T15:02:32Z")

</div>

I mean make the page min height 100%

---

<div class="post-metadata">

**Author:** ![anthony](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/anthony/32/79536_2.png) [@anthony](https://forum.wixstudio.com/u/anthony)\
**Post date:** [October 12, 2023, 3:38pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/8 "2023-10-12T15:38:43Z")

</div>

Can you share a screenshot of how it looks on iOS?

---

<div class="post-metadata">

**Author:** ![cjechurchill](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/cjechurchill/32/10405_2.png) [@cjechurchill](https://forum.wixstudio.com/u/cjechurchill)\
**Post date:** [October 12, 2023, 4:08pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/9 "2023-10-12T16:08:10Z")

</div>

Here is a link. I set the image to 85vh and the bar at the bottom to 15vh. So it should fit perfectly in the viewport. But as you can see the bottom bar is cut off. It needs to be in % for IOS for it to fit perfectly. [https://cjechurchill.wixstudio.io/my-site-3](https://cjechurchill.wixstudio.io/my-site-3)

---

<div class="post-metadata">

**Author:** ![anthony](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/anthony/32/79536_2.png) [@anthony](https://forum.wixstudio.com/u/anthony)\
**Post date:** [October 12, 2023, 7:05pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/10 "2023-10-12T19:05:28Z")

</div>

While I don’t have an iOS device to check this it does seem like there are [new units for viewport height](https://caniuse.com/viewport-unit-variants) including `svh, lvh, dvh` and these might solve your problem.

This might also be something Wix could improve and offer in the editor.

You could try assigning classes to these sections and then specifying their height in these units. Example:

```css
.bottomBar {
    height: 15dvh;
}

.section {
    height: 85dvh;
}

```

Some more info here:

> <https://stackoverflow.com/questions/68094609/ios-15-safari-floating-address-bar>

---

<div class="post-metadata">

**Author:** ![cjechurchill](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/cjechurchill/32/10405_2.png) [@cjechurchill](https://forum.wixstudio.com/u/cjechurchill)\
**Post date:** [October 12, 2023, 7:31pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/11 "2023-10-12T19:31:55Z")

</div>

Am I doing this right? The CSS doesn’t seem to have any effect on the website

 ![Screenshot 2023-10-12 at 20.31.32](https://us1.discourse-cdn.com/wix/original/3X/f/9/f9a1fbae47d881a22c5adf2a744d0b6bb573e0c9.png)

---

<div class="post-metadata">

**Author:** ![cjechurchill](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/cjechurchill/32/10405_2.png) [@cjechurchill](https://forum.wixstudio.com/u/cjechurchill)\
**Post date:** [October 12, 2023, 7:39pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/12 "2023-10-12T19:39:08Z")

</div>

I found this Webflow video which explains my issue perfectly. SVH is the best option, but Wix does have this. Could you forward this on to the developers and ask them to implement it please? [https://www.youtube.com/watch?v=7judyqwqmKo&t=204s](https://www.youtube.com/watch?v=7judyqwqmKo&t=204s)

---

<div class="post-metadata">

**Author:** ![emmy](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/emmy/32/113141_2.png) [@emmy](https://forum.wixstudio.com/u/emmy)\
**Post date:** [October 12, 2023, 8:04pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/13 "2023-10-12T20:04:30Z")

</div>

make sure your selected elements have the appropriate class attached to it (select your #bar section, where it says “Custom classes” type in ‘bar’, do the same thing for your hero section)

Another feature that might solve your issue is to select your bar section and change the position type to Sticky and stick to bottom (see this [article](https://support.wix.com/en/article/studio-editor-creating-sticky-elements-and-sections)). That would make sure that the section sticks to the bottom of the site until you scroll past it.

---

<div class="post-metadata">

**Author:** ![cjechurchill](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/cjechurchill/32/10405_2.png) [@cjechurchill](https://forum.wixstudio.com/u/cjechurchill)\
**Post date:** [October 12, 2023, 8:16pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/14 "2023-10-12T20:16:47Z")

</div>

Thank you. I did it and it worked. Can you ask the Wix developers to implement the SVH unit?

---

<div class="post-metadata">

**Author:** ![emmy](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/emmy/32/113141_2.png) [@emmy](https://forum.wixstudio.com/u/emmy)\
**Post date:** [October 12, 2023, 8:37pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/15 "2023-10-12T20:37:53Z")

</div>

I’m glad it worked!

There actually is a way to do something like this. You will have to toggle “Advanced CSS grid”. Then you will have to create two rows (one for your hero and one for the bar). And then you will be able to set the whole section to 100% vh, and then set the hero row to 85% and the bar to 15%.

 ![image](https://us1.discourse-cdn.com/wix/original/3X/c/c/cc23f3ec2337a8206a336496c10a42a9bb1bccd1.png)

---

<div class="post-metadata">

**Author:** ![anthony](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/anthony/32/79536_2.png) [@anthony](https://forum.wixstudio.com/u/anthony)\
**Post date:** [October 13, 2023, 2:44pm UTC](https://forum.wixstudio.com/t/how-do-i-use-wix-code-to-set-100-height-i-want-not-vh/52994/16 "2023-10-13T14:44:10Z")

</div>

> [@cjechurchill](#):
>
> Thank you. I did it and it worked. Can you ask the Wix developers to implement the SVH unit?

I made a request here: [Add new unit types to sizing options](https://forum.wixstudio.com/t/add-new-unit-types-to-sizing-options/53030)