[FIXED] how to make a bootstrap side menu fill height

Issue

this is my side menu

<template>
  <div class="p-3 text-bg-dark shadow">
    <div class="dropdown">
      <a
        href="#"
        class="
          align-items-center
          text-white text-decoration-none
          dropdown-toggle
        "
        data-bs-toggle="dropdown"
      >
        <strong>profile</strong>
      </a>
      <ul class="dropdown-menu dropdown-menu-dark shadow">
        <li><a class="dropdown-item" href="#">Sign out</a></li>
      </ul>
    </div>

    <hr />
    <ul class="nav nav-pills flex-column">
      <li class="nav-item">
        <a href="#" class="nav-link active" data-bs-toggle="pill">
          Today's Tasks
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" data-bs-toggle="pill">All Tasks</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" data-bs-toggle="pill">Create Task</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" data-bs-toggle="pill">Edit Task</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

this is my main view

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-6 bg-danger"><Sidebar /></div>
      <div class="col-6">content</div>
    </div>
  </div>
</template>

<script>
import Sidebar from "@/components/SidebarComp.vue";
export default {
  components: {
    Sidebar,
  },
};
</script>

this is what i get

3 problems

1. How can I fill the remaining height

2. Why doesn't it fill the width even though I'm using container-fluid?

3. If I make its position fixed which is what I want since this is a side menu, this happens :

so basically, how can I make a fixed side menu that fills width and the height?

Solution

Here you go...

Basically, you have two components: sidebar and content. Add class left-side to the sidebar and class right-side to the content. Set width: 20vw; to the sidebar and width: 80vw; to the content. Those are relative CSS units. Be careful, using % isn't the same as using vw and vh (read more about it here). Sidebar and content together should take up full screen width (20vw + 80vw = 100vw). But because of position: absolute; sidebar and content will overlap, so you need to push content to the right. This is done by setting left: 20vw;.

---

Add class left-side.

<template>
  <div class="p-3 text-bg-dark shadow left-side">
    <div class="dropdown">
      <a
        href="#"
        class="
          align-items-center
          text-white text-decoration-none
          dropdown-toggle
        "
        data-bs-toggle="dropdown"
      >
        <strong>profile</strong>
      </a>
      <ul class="dropdown-menu dropdown-menu-dark shadow">
        <li><a class="dropdown-item" href="#">Sign out</a></li>
      </ul>
    </div>

    <hr />
    <ul class="nav nav-pills flex-column">
      <li class="nav-item">
        <a href="#" class="nav-link active" data-bs-toggle="pill">
          Today's Tasks
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" data-bs-toggle="pill">All Tasks</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" data-bs-toggle="pill">Create Task</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" data-bs-toggle="pill">Edit Task</a>
      </li>
    </ul>
  </div>
</template>

Add class right-side.

<template>
  <div class="container-fluid right-side">
    <div class="row">
      <div class="col-6 bg-danger"><Sidebar /></div>
      <div class="col-6">content</div>
    </div>
  </div>
</template>

Add CSS:

.left-side {
     position: absolute;
     width: 20vw;
     height: 100vh;
     left: 0;
}

.right-side {
     position: absolute;
     width: 80vw;
     left: 20vw;
}

Answered By - Cervus camelopardalis

Answer Checked By - Marie Seifert (PHPFixing Admin)