How can I make ui height max out at viewport electron

user_11520912 0
Viewed 82

I'm trying to make a basic ui using a top nav bar as well as a sidebar and then in the center will be the main view quadrant. However no matter which way I try to set height of divs the content keeps overflowing.

My code:

<div class="tCont h-full max-h-full p-0 m-0">
  <div class="TopBar bg-blue-300 flex p-0 m-0">
    <p>Topbar</p>
  </div>
  <div class="viewCont grid grid-cols-6 h-full p-0 m-0">
    <div class="sideBar bg-indigo-100 p-0 m-0 h-full">
      <p>sidebar</p>
    </div>
    <div class="mainWindow bg-blue-200 col-span-5 p-0 m-0">
      <p>main content</p>
    </div>
  </div>
</div>

https://play.tailwindcss.com/9LBAHKdt10

Is there a way to set the height of a container or maybe of the grid/viewcont so that it doesn't overflow?

tailwind-css css html
1 Answers

You can surelly set the height of a container by pure CSS. You can put the CSS inside your element (althought not recomended), like:

<div class="tCont h-full max-h-full p-0 m-0" style="height:100px">

To prevent the overflow, you can use a CSS property "overflow: hidden", with this, it prevents that the scroll bar is shown even when needed.

user_176652130
Related