时间戳

首页 > 解决方案 > 隐藏左侧导航栏后如何使打印样式表的内容全宽

html - 隐藏左侧导航栏后如何使打印样式表的内容全宽

问题描述

在创建打印样式表时，我想隐藏所有导航，但由于该站点有一个左侧导航栏，可以扩展窗口的整个高度，我怎样才能让打印的内容占据页面的整个宽度？目前，内容将正常显示和打印，但导航栏所在的页面上有一个“列”。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <style>
    .column {
      padding: 15px;
    }
    
    .clearfix::after {
      content: "";
      clear: both;
      display: table;
    }
    
    .menu {
      position: absolute;
      background-color: #e9e9e9;
      top: 0;
      bottom: 0;
      width: 25%;
    }
    
    .content {
      position: relative;
      margin-left: 25%;
      padding-left: 60px;
      right: 0;
    }
    
    .menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    .menu li {
      padding: 8px;
      margin-bottom: 8px;
      background-color: #33b5e5;
      color: #ffffff;
    }
    
    .menu li:hover {
      background-color: #0099cc;
    }
    
    @media print {
      .menu {
        display: none;
      }
    }
  </style>
</head>

<body>

  <div class="clearfix">
    <div class="column menu">
      <ul>
        <li>Nav Item</li>
        <li>Nav Item</li>
        <li>Nav Item</li>
        <li>Nav Item</li>
      </ul>
    </div>

    <div class="column content">
      <h1>Title / Heading</h1>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
    </div>
  </div>

</body>

</html>

标签： htmlcss

解决方案

除了在 上进行设置之外display: none，.menu您还需要将背面的margin-left和“重置”到您的内部：padding-left.content0@media print

@media print {
  .menu {
    display: none;
  }
  .content {
    margin-left: 0;
    padding-left: 0;
  }
}

这可以在下面看到：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <style>
    .column {
      padding: 15px;
    }
    
    .clearfix::after {
      content: "";
      clear: both;
      display: table;
    }
    
    .menu {
      position: absolute;
      background-color: #e9e9e9;
      top: 0;
      bottom: 0;
      width: 25%;
    }
    
    .content {
      position: relative;
      margin-left: 25%;
      padding-left: 60px;
      right: 0;
    }
    
    .menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    .menu li {
      padding: 8px;
      margin-bottom: 8px;
      background-color: #33b5e5;
      color: #ffffff;
    }
    
    .menu li:hover {
      background-color: #0099cc;
    }
    
    @media print {
      .menu {
        display: none;
      }
      .content {
        margin-left: 0;
        padding-left: 0;
      }
    }
  </style>
</head>

<body>

  <div class="clearfix">
    <div class="column menu">
      <ul>
        <li>Nav Item</li>
        <li>Nav Item</li>
        <li>Nav Item</li>
        <li>Nav Item</li>
      </ul>
    </div>

    <div class="column content">
      <h1>Title / Heading</h1>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
    </div>
  </div>

</body>

</html>

推荐阅读