How to stop my page from scrolling after adding the absoule property

Question

I have been stuck on this issue for quite some time now. I am trying to make a responsive dashboard where at a certain screen size the side navigation bar will be hidden and you can toggle it back with a use of a button. My main content of the screen has its overflow: hidden so its the only scrollable area on the screen, but as soon as the side panel is added on the small screen I get extra area on the bottom of the page.

How can i stop it from happening

Link to implementation: https://codesandbox.io/s/keen-hertz-zr2h8?resolutionWidth=787&resolutionHeight=675&file=/src/App.vue

Code:

<template>
  <div>
    <div class="w-full absolute">
      <!-- TOP Navigation starts -->

      <nav
        class="h-16 flex items-center border-b-2 border-collGray-100 lg:items-stretch justify-end lg:justify-between bg-black relative z-50"
      >
        <p class="text-white">TOP NAVIGATION</p>
      </nav>
      <!-- TOP Navigation ends -->
    </div>
    <!-- Sidebar FULL SCREEN starts -->
    <div
      class="flex flex-no-wrap h-screen bg-coolGray-200 pt-16 overflow-hidden"
    >
      <div
        class="w-64 relative bg-green-500 shadow flex-col justify-between hidden lg:flex pb-12"
      >
        <div class="px-8">
          <ul class="mt-12">
            <li
              class="flex w-full text-blue-900 cursor-pointer items-center mb-6 hover:text-red-500"
            >
              <div class="py-1 px-3 flex items-center justify-center text-xs">
                <span class="material-icons"> > </span>
              </div>
              <div class="flex items-end">
                <span class="text-sm">Item 1</span>
              </div>
            </li>

            <li
              class="flex w-full text-blue-900 hover:text-red-500 cursor-pointer items-center mb-6"
            >
              <div class="py-1 px-3 flex items-center justify-center text-xs">
                <span class="material-icons"> > </span>
              </div>
              <div class="flex items-center">
                <span class="text-sm">Item 2</span>
              </div>
            </li>

            <li
              class="flex w-full text-blue-900 hover:text-red-500 cursor-pointer items-center mb-6"
            >
              <div class="py-1 px-3 flex items-center justify-center text-xs">
                <span class="material-icons"> > </span>
              </div>
              <div class="flex items-center">
                <span class="text-sm">Item 3</span>
              </div>
            </li>

            <li
              class="flex w-full text-blue-900 hover:text-red-500 cursor-pointer items-center mb-6"
            >
              <div class="py-1 px-3 flex items-center justify-center text-xs">
                <span class="material-icons"> > </span>
              </div>
              <div class="flex items-center">
                <span class="text-sm">Item 4</span>
              </div>
            </li>
            <li
              class="flex w-full text-blue-900 hover:text-red-500 cursor-pointer items-center mb-6"
            >
              <div class="py-1 px-3 flex items-center justify-center text-xs">
                <span class="material-icons"> > </span>
              </div>
              <div class="flex items-center">
                <span class="text-sm">Item 5</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- Sidebar FULL SCREEN ends -->
      <!-- Collapse Start-->
      <div
        class="z-40 absolute top-0 lg:hidden transition duration-150 ease-in-out"
        id="mobile-nav"
      >
        <div
          id="openSideBar"
          class="h-10 w-10 bg-green-500 absolute right-0 mt-16 -mr-10 flex items-center shadow rounded-tr rounded-br justify-center cursor-pointer"
          @click="sidebarHandler(true)"
        >
          <span
            class="material-icons text-red-500"
            :class="{ 'transform rotate-180': moved }"
          >
            >
          </span>
        </div>

        <div class="w-64 relative bg-green-500 shadow h-screen">
          <div class="px-8">
            <ul class="mt-12">
              <li
                class="flex w-full text-red-500 cursor-pointer items-center mb-6 hover:text-darkGrey"
              >
                <div class="py-1 px-3 flex items-center justify-center text-xs">
                  <span class="material-icons"> > </span>
                </div>
                <div class="flex items-end">
                  <span class="text-sm">Item 1</span>
                </div>
              </li>

              <li
                class="flex w-full text-red-500 hover:text-darkGrey cursor-pointer items-center mb-6"
              >
                <div class="py-1 px-3 flex items-center justify-center text-xs">
                  <span class="material-icons"> > </span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm">Item 2</span>
                </div>
              </li>

              <li
                class="flex w-full text-red-500 hover:text-darkGrey cursor-pointer items-center mb-6"
              >
                <div class="py-1 px-3 flex items-center justify-center text-xs">
                  <span class="material-icons"> > </span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm">Item 3</span>
                </div>
              </li>

              <li
                class="flex w-full text-red-500 hover:text-darkGrey cursor-pointer items-center mb-6"
              >
                <div class="py-1 px-3 flex items-center justify-center text-xs">
                  <span class="material-icons"> > </span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm">Item 4</span>
                </div>
              </li>
              <li
                class="flex w-full text-red-500 hover:text-darkGrey cursor-pointer items-center mb-6"
              >
                <div class="py-1 px-3 flex items-center justify-center text-xs">
                  <span class="material-icons"> > </span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm">Item 5</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- Collapse End-->
      <!-- Content Start -->

      <div class="mx-auto bg-gray-300 h-full py-2 w-full px-2">
        <div
          class="w-full h-full border-2 border-red-900 bg-gray-600 text-red-900 text-red-500 rounded-lg shadow-sm overflow-scroll overflow-x-hidden"
        >
          <div>
            <ul>
              <li v-for="index in 100" :key="index">
                <p>Item: {{ index }}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- Content END -->
    </div>
  </div>
</template>

Script:

<script>
export default {
  data() {
    return {
      moved: false,
    };
  },
  methods: {
    sidebarHandler() {
      var sideBar = document.getElementById("mobile-nav");
      sideBar.style.transform = "translateX(-260px)";
      if (this.moved) {
        sideBar.style.transform = "translateX(0px)";
        this.moved = false;
      } else {
        sideBar.style.transform = "translateX(-260px)";
        this.moved = true;
      }
    },
  },
  watch: {
    $route() {
      if (!this.moved) {
        this.sidebarHandler();
      }
    },
  },
};
</script>

Answer 1

You need your sidebar to be smaller than the screen, that way you will not have an additional scroll for content.

Add class h-screen to id="mobile-nav", remove h-screen class from inner container (green background) and add style height: calc(100vh - 48px); to this container.