javascript - 如何使我的导航栏适合 100% 的网站高度

Question

如何让我的导航栏 100% 占据浏览器窗口？我正在使用 Vue.js。

这是我的导航栏组件：

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

这是我的 App.vue 文件：

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

好吧，这是我的真棒结果： 请帮助！

标签： javascriptcssvue.js

Answer 1

尝试使用height: 100vh

vh是相对于视口高度的 1% 的单位

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