this is my side menu

<template>
  <div >
    <div >
      <a
        href="#"
        
        data-bs-toggle="dropdown"
      >
        <strong>profile</strong>
      </a>
      <ul >
        <li><a  href="#">Sign out</a></li>
      </ul>
    </div>

    <hr />
    <ul >
      <li >
        <a href="#"  data-bs-toggle="pill">
          Today's Tasks
        </a>
      </li>
      <li >
        <a href="#"  data-bs-toggle="pill">All Tasks</a>
      </li>
      <li >
        <a href="#"  data-bs-toggle="pill">Create Task</a>
      </li>
      <li >
        <a href="#"  data-bs-toggle="pill">Edit Task</a>
      </li>
    </ul>
  </div>
</template>

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

this is my main view

<template>
  <div >
    <div >
      <div ><Sidebar /></div>
      <div >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?

CodePudding user response：

Here you go...

Sidebar (width: 20vw;) and content (width: 80vw;) should take full screen width (100vw).

Add class left-side.

<template>
  <div >
    <div >
      <a
        href="#"
        
        data-bs-toggle="dropdown"
      >
        <strong>profile</strong>
      </a>
      <ul >
        <li><a  href="#">Sign out</a></li>
      </ul>
    </div>

    <hr />
    <ul >
      <li >
        <a href="#"  data-bs-toggle="pill">
          Today's Tasks
        </a>
      </li>
      <li >
        <a href="#"  data-bs-toggle="pill">All Tasks</a>
      </li>
      <li >
        <a href="#"  data-bs-toggle="pill">Create Task</a>
      </li>
      <li >
        <a href="#"  data-bs-toggle="pill">Edit Task</a>
      </li>
    </ul>
  </div>
</template>

Add class right-side.

<template>
  <div >
    <div >
      <div ><Sidebar /></div>
      <div >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;
}