如何让Vue模板中Div实现100%宽高？为何组件布局异常？

核心原因：百分比尺寸依赖父元素的明确基准 #

给元素设置width: 100%或height: 100%时，这个百分比是相对于父元素的计算尺寸生效的。如果父元素没有设置明确的宽高（比如高度由内容自动撑开），子元素的百分比尺寸就找不到参考基准，自然无法铺满预期区域。

你的场景里，模板中的<div>父元素是Vue应用的挂载容器（通常是页面里的<div id="app">），而默认情况下html、body以及这个挂载容器都没有设置100%的宽高，导致你的<div>无法继承到完整的视口尺寸。

具体解决步骤 #

1. 设置全局根元素的宽高基准
   先给页面最外层的根元素设置100%宽高，让整个视口成为尺寸参考：

   /* 可放在全局样式文件（如main.css），或组件的非scoped样式中 */
   html, body, #app {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
   }
   

   注意：如果在组件内写这段样式，要去掉scoped属性，否则样式无法作用到html、body这类外部元素。

2. 优化组件内div的样式
   现在组件内的<div>已经能拿到父元素的尺寸基准了，可补充细节避免布局异常：

   <style scoped>
   div {
     width: 100%;
     height: 100%;
     box-sizing: border-box; /* 防止内边距、边框撑开元素超出预期 */
   }
   </style>
   

3. 排查子组件的干扰
   如果问题仍存在，检查Navbar和Calendar组件的样式，看是否存在margin、padding或overflow属性导致父容器高度被撑开、出现滚动条等情况。

可选替代方案：使用视口单位 #

如果不想依赖父元素的尺寸，可直接用视口单位vw/vh，让元素直接基于浏览器视口设置尺寸：

<style scoped>
div {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}
</style>

注意：页面出现滚动条时，100vw可能会超出视口宽度，可搭配overflow-x: hidden处理。

内容的提问来源于stack exchange，提问作者cucalondev