0

How can make my navbar 100% of the browser window? I'm using vuejs.

This is my navbar component:

  <div class="navbar">
    <div class="navbar-nav">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
      </ul>
    </div>
  </div>


<style scoped>
.navbar {
  width: 20%;
  height: 100%;
  background-color: greenyellow;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
}

.check {
  justify-self: flex-end;
}
</style>

And this is my App.vue file:

<template>
  <div>
    <NavBar/>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  background-color: grey;
}

body {
  width: 100%;
  height: 100%;
}
</style>

Well, and this is my awesome result: https://i.stack.imgur.com/ZOzph.png Please help!!

MaxiGui
  • 6,190
  • 4
  • 16
  • 33
Silverian
  • 13
  • 3

2 Answers2

2

Try using height: 100vh

vh is a unit which is relative to 1% of the height of the viewport

          <div class="navbar">
            <div class="navbar-nav">
              <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
              </ul>
            </div>
          </div>


        <style scoped>
        .navbar {
          width: 20%;
          height: 100vh;
          background-color: greenyellow;
        }

        .navbar-nav {
          display: flex;
          flex-direction: column;
        }

        .check {
          justify-self: flex-end;
        }
        </style>
Ran Marciano
  • 1,431
  • 5
  • 13
  • 30
1

.navbar {
  width: 20%;
  height: 100vh;
  background-color: greenyellow;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
}

.check {
  justify-self: flex-end;
}
<div class="navbar">
    <div class="navbar-nav">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
      </ul>
    </div>
  </div>
Rajkiran Shetty
  • 74
  • 4