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

Question

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

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

@媒体打印{

.no-print {
    display: none;
}

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

如何删除此空间预留？

Answer 1

在 v-content 上保留了填充空间，所以你必须添加

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

到您的媒体查询。