Steps to ensure your Bootstrap side menu spans the entire height of the page

Welcome to 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>

Enjoy exploring 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>

I encountered 3 problems, seeking solutions:

  1. How can I make sure it fills the remaining height?

  2. Why doesn't it fill the width even with container-fluid?

  3. If I set its position to fixed as desired for a side menu, this issue arises: https://i.sstatic.net/A79s7.png

Basically, how can I achieve a fixed side menu that fills both width and height?

Answer №1

Here's the solution...

Essentially, you have two main components: a sidebar and a content area. Assign the class left-side to the sidebar and the class right-side to the content area. Specify width: 20vw; for the sidebar and width: 80vw; for the content area. These values are relative CSS units. Remember that using % is different from using vw and vh (you can learn more about this here). When combined, the sidebar and content area should occupy the full screen width (20vw + 80vw = 100vw). However, due to the position: absolute; property, the sidebar and content may overlap, so you must offset the content to the right. This can be achieved by setting left: 20vw;.


Apply the 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>

Apply the 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>

Insert the following CSS:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

It is not possible to apply a background color to an HTML element located outside of the App.Vue

Hey there, thanks for taking the time to read my query! I am interested in adding a gradient background color to a specific page on my Vue application. I tried applying the following code in components/Frontpage.Vue: html { background: linear-gradient( ...

The height and alignment of the <a> tag and <p> element vary within a flex container

Currently, I am in the process of constructing a bottom navigation bar for a blog page. This navigation bar will allow users to easily navigate between the last blog entry, the main blog home/index, and the upcoming post. However, when the user reaches the ...

What could be the reason for the loss of default browser focus on this accordion navigation?

Why is the browser default focus being lost on this accordion navigation? <div class="panel panel-default"> <div class="panel-heading"> <button aria-controls="collapseTwo" aria-selected="false" data-target="#collapseTwo" data-to ...

Issues with implementing Bootstrap icons in Angular are hindering functionality

As a beginner in Angular, I am currently working on creating a simple website using Angular and a Bootstrap template. However, I have encountered many issues along the way. Right now, I am struggling to utilize Bootstrap icons in my project. It appears tha ...

What is the best way to add prefixes to my SCSS style sheets?

After attempting to add prefixes to my scss files, I came across the autoprefixer tool. However, I discovered that it only supports CSS files. Is there a way to utilize autoprefixer with scss files? Here are the commands for Autoprefixer: npm install post ...

Achieve a full height for children without the need to specify a fixed height for the

I'm currently working on a container div that houses two child divs: the first one, positioned to align with its parent's left border, contains a series of buttons while the second one holds the main content. In essence, it operates like a tab na ...

Tips for aligning the box beside another

How can I arrange 2 boxes in one line and the other 2 in the next line? Currently, they are all showing up on separate lines. Can anyone provide a solution to this issue? body{ background:#f4f4f4; color:#555; font-family:Bahnschrift SemiCond ...

gulp-minify-css-names not altering any files during processing

For quite some time, I have been on the search for a solution that can assist me in automating the process of renaming/minifying class names in HTML, JS, CSS files simultaneously throughout my entire project using gulp. While there are many solutions avai ...

The Ion-button seems to be malfunctioning

I am interested in using special buttons for my ionic 1 project, specifically the ion-button feature outlined on this page: Ionic Buttons. I attempted to create a Round Button and an Outline + Round Button: <h2 class="sub-header" style="color:#4 ...

Ensure that the child element maintains equal height and width measurements within a row that is distinct

Is there a way to arrange 4 items inside a flex container in a 2 X 2 grid layout while ensuring that they all have the same width and height? I've tried using flex-grow: 1;, but since the children are in different flex containers, they do not obey th ...

Guide on aligning a child div directly beneath its parent without specifying the parent's height

I want to position a div beneath its parent in a way that mimics a menu opening below it. Currently, I attempted using right and top, but the child div ends up overlapping the parent. If the parent had a defined height (rather than top: 0 as shown below), ...

conceal the bootstrap navigation bar while the page is being

Struggling to toggle a Bootstrap navbar on scroll? Need some guidance from the pros out there. I admit, my Bootstrap and jQuery skills are pretty basic. The browser console doesn't throw any errors, and I've experimented with fadeIn, fadeOut, add ...

Transitioning into a fade out effect using CSS

I successfully created a modal using CSS and jQuery. The fade in transition works perfectly, but I'm having trouble implementing a transition for when it fades out and scales back to 1.4. The main issue is that the modal disappears too quickly. Chec ...

The background is obscured from view because of its current positioning

The issue I am facing is that the background color of the <ol> list is not showing correctly. This problem arose after I floated the label to the left and the input to the right. How can I resolve this? The desired outcome should be: My current resu ...

Positioning of content in bootstrap's navbar and dropdown menus

The issue lies in the drop-down functionality (you can check out the problematic html code on this codepen, originally inspired by this source). <header class="pb-3"> <nav class="navbar navbar-expand-md navbar-light bg-white borde ...

Fluid centering of DIV content both vertically and horizontally

Check out this example: When dealing with fluid divs, line height won't work as expected. My current code relies on line-height which doesn't work when the box sizes change. How can I ensure that a link (content) always appears perfectly centere ...

The line directly following the first line within the <li> element is located in the same position

I need help with customizing the bullet background-image for an <li> element. I want the text in the bullet to be displayed outside the marker using the CSS property list-item-position: outside. However, my current implementation doesn't seem to ...

Issues with Carousel Plugin Functionality

**Hey everyone, I could really use some help. As a beginner coder, please forgive any errors in my code. I am currently working on a webpage where I need to incorporate a carousel plugin within a panel body to display the latest photos. The code provided ...

css displaying inconsistently on Mi Browser mobile view

Everything looks great in Chrome (mobile), but for some reason when I test it out on Mi Browser, the CSS isn't displaying correctly. I'm working with Next.js and here's a snippet from my head tag: <Head> <meta charSet="UTF-8&q ...

Incorporate a variable into a CSS class

Currently, I am working on developing a component that creates an animation loop with a duration that is passed as a prop to the component. The issue I am facing involves using CSS to create the animation: animate:{ -webkit-transition: 10.0s !important ...