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

Question

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

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

@media print {

.no-print {
    display: none;
}

}

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

如何删除此空间预订？

Answer 1

详细介绍Kael的答案，我将此添加到了我的主要App.vue组件中：

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

Answer 2

在v-content上使用填充保留空格，因此您必须添加

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

到您的媒体查询。