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

Question

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

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

@媒体打印{

.no-print {
    display: none;
}

}

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

如何删除此 space 预订？

Answer 1

Space 在 v-content 上保留了填充，因此您必须添加

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

到您的媒体查询。

Answer 2

详细说明 Kael 的回答，我将其添加到我的主要 App.vue 组件中：

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

Answer 3

下面的布局页面对我有用。

@media print {
    .v-main {
        padding: 0 !important;
    }
}

When printing, Vuetify application reserves space for invisible elements