打印时，Vuetify 应用程序为不可见元素保留空间答案

【问题标题】：When printing, Vuetify application reserves space for invisible elements打印时，Vuetify 应用程序为不可见元素保留空间
【发布时间】：2018-11-17 23:39:10
【问题描述】：

我使用 Vue.JS 和 Vuetify 创建了一个应用程序。该布局基于 Google 通讯录布局。我同时使用工具栏和导航抽屉。

我希望能够在不打印工具栏和导航抽屉的情况下从浏览器打印内容。我创建了以下 CSS 类：

@媒体打印 {

.no-print {
    display: none;
}

}

我将这个类应用于工具栏和导航抽屉。当我尝试打印页面时，这些元素不会显示在打印预览中，这很好，但内容不会延伸到整个页面。看起来工具栏和导航抽屉空间仍然是为这些元素保留的。

如何删除此空间预留？

【问题讨论】：

可以包含你的 vue/html 代码吗？

标签： css vue.js vuetify.js

【解决方案1】：

详细阐述 Kael 的回答，我将此添加到我的主要 App.vue 组件中：

<style scoped>
@media print{
    .v-content {
        padding: 0 !important;
    }
}   
</style>

【讨论】：

【解决方案2】：

v-content 上的填充保留了空间，因此您必须添加

.v-content {
  padding: 0 !important;
}

到您的媒体查询。

【讨论】：

可能是因为更新了，但是这个类现在叫做“v-content”