在创建打印样式表时，我想隐藏所有导航，但由于该站点有一个左侧导航栏延伸了整个窗口的高度，我怎样才能让打印的内容占据整个窗口的宽度这一页？目前，内容可以正常显示和打印，但在导航栏所在的页面上有一个“列”。
<!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>最佳答案
除了在 .menu 上设置 display: none 之外，您还需要“重置”margin-left 和.content 的 padding-left 回到 @media print 内的 0:
@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>关于html - 隐藏左侧导航栏后如何使打印样式表的内容全宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50053081/