vue.js 我怎样才能做到我的模板的div是100%的宽度和100%的高度？

zhte4eai 于 2022-12-19 发布在 Vue.js

关注(0)|答案(1)|浏览(174)

我试着做我的div将是100%，但我不能做到这一点.我的代码：

<template>
  <div>
    <Navbar/>
    <Calendar/>
  </div>
</template>
<script setup>
import Calendar from '@/components/Calendar.vue';
import Navbar from '@/components/Navbar.vue';
</script>

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

我明白了：

为什么我把所有的组件都放在那里？

vue.js

来源：https://stackoverflow.com/questions/74791559/how-i-can-do-that-the-div-of-my-template-are-100-width-and-100-heigth

1条答案

按热度按时间

bvn4nwqk1#

要将元素的高度设置为浏览器窗口的100%，只需使用CSS的vh属性：

div {
 height: 100vh;
 width: 100%;
}

最好将此高度赋予应用的根元素，这样根元素的高度将始终等于浏览器窗口的高度。

提示-

如果你在应用vh后看到一个垂直滚动条，这是因为正文有额外的边距和填充，所以这样做-

html,
body {
  margin: 0;
  padding: 0;
}

了解更多关于viewport vs percentage units的信息

赞(0）回复(0）举报 2022-12-19

我来回答

vue.js 我怎样才能做到我的模板的div是100%的宽度和100%的高度？

1条答案

相关问题

热门标签

最新问答