set height to 100% of parent div

[jhancock]

I've tried so many things and can't find the magic :).

I have a very simple web page.
Main contains a div which has a height set to 80% of the viewport. Then the deep-chat component inside.

Here's the exact html as copied from Chrome tools:

<main class="container">
<div id="chat" style="height: 80vh;">
<deep-chat style="width: auto; background-color: rgb(247, 247, 247); border-radius: 4px; height: 350px; border: 1px solid rgb(202, 202, 202); font-family: Inter, sans-serif, Avenir, Helvetica, Arial; font-size: 0.9rem; position: relative; overflow: hidden;"></deep-chat>
</div></main>

deep-chat seems to have a default height of 350px. I've tried replacing the styles in deep-chat with so many things and can't get the chat UI to respect to height of the parent div.

Any ideas?

thanks, Jon

[OvidijusParsiunas]

Hi @jhancock.

If you want the Deep Chat height to fully inherit the parent element's height, you can use the height: inherit; style.

If you alternatively want it to inherit a portion of the parent element's height, you can use the following: height: 70%; display: block;

You can also check the following issue for more information.

Let me know if this helps you!

[jhancock]

Brilliant!  That works.  Thank you.  DeepChat is doing so well for me :).Sent from my iPadOn 15 Apr 2024, at 1:40 PM, Ovidijus Parsiunas @.***> wrote: Hi @jhancock. If you want the Deep Chat height to fully inherit the parent element's height, you can use the height: inherit; style. If you alternatively want it to inherit a portion of the parent element's height, you can use the following: height: 70%; display: block; You can also check the following issue for more information. Let me know if this helps you!

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

[OvidijusParsiunas]

Happy to hear. I will close this issue now. Thanks!