how to make height full screen

2 Replies

Hi @japope. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To make an element's height full screen, you can use CSS to set the height to 100% of the viewport height. This can be achieved using the height: 100vh; property. Here is an example:

.full-screen {
  height: 100vh;
}

.full-screen {
  height: 100vh;
}

You can apply this class to any element you want to have a full-screen height. If you are using a parent element with a specific height and want a child element to fill that height, you can use the height: 100%; property on the child element. Here is an example:

<html>
  <body>
    <div class="parent-element">
      <div class="child-element">The text is here!</div>
    </div>
  </body>
</html>

<html>
  <body>
    <div class="parent-element">
      <div class="child-element">The text is here!</div>
    </div>
  </body>
</html>

.parent-element {
  height: 100vh; /* or any specific height */
  display: flex; /* or grid */
}

.child-element {
  height: 100%;
}

.parent-element {
  height: 100vh; /* or any specific height */
  display: flex; /* or grid */
}

.child-element {
  height: 100%;
}

This ensures that the child element takes up the full height of the parent element. For more detailed examples and conditions for vertical alignment using margins, you can refer to the CSS Vertical Alignment (https://refine.dev/blog/css-vertical-align/#vertical-alignment-using-margins) section. If you need further customization or have specific requirements, please provide more details. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@465923409973477386> kapa.ai is still learning and improving, please let us know how it did by reacting below