CODEWITHSUNDEEP
javascripthtmlcsssassscss-mixins
eujin
eujin

Reputation: 182

Calculate the height value of DIV as a function of SCSS and use it as the height of another DIV

Error image and direction of purpose

The DIV height value must be calculated as a function of SCSS and used at a different DIV height.

I searched but couldn't find the SCSS function that calculates the height of another div using an internal variable.

I'm trying to create a chat window, and I hope that the input box for this chat is position: absolute and always at the bottom.

The problem is that the text you type increases the height of the chat entry box. This means that the exact height is not determined in the chat.

A problem was found that determines the height of the dark red chat content.

The chat history field could not be set to calc() because it is not a fixed height, resulting in an error similar to the one in the middle.

The last picture is what I want.

Can the SCSS function receive the height of the chat input box to determine the height of the chat content?

I would like to solve this problem with SCSS or CSS as much as possible, but if not, I can use pure JavaScript. (Not jQuery.)

<div class="parent1">
    <div class="chat-history">
       <p>abdcdaceasdfasdfddasfdefdafdadfsdfdasdfdsfasdfasdf</p>
    </div>
    <div class="chat-input"></div>
</div>

.parent1 {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.chat-history {
    width: 100%
} // I'd like to calculate the height of this.

.chat-input {
    display: flex;
    position: absolute;
    bottom: 0;
    min-width: 70px;
    max-height: 140px;
}

Upvotes: 1

Views: 2826

Answers (2)

Miguel Esquirol
Miguel Esquirol

Reputation: 54

SCSS can't calculate the height, you'll need Javascript for that. The only thing that can somehow use heights that are not set in advance is flexbox. But if your boxes are not next to each other it won't be useful.

You could create a javascript that creates a CSS variable based on the height of the window.

:root {
    --my-variable-name: #999999;
}

document.documentElement.style
    .setProperty('--my-variable-name', HEIGHT);

Upvotes: 1

user14860400
user14860400

Reputation:

Please try this:

.parent1{display:flex;width:100%;height:50vh;position:relative;}

Upvotes: 0

Related Questions