Question

这是我的代码：

        <body>

        <div class="headerCont noprint">
            <div class="headerHold">
                <div class="logoCont"><img src="images/logo.jpg" width="104" height="74" alt="Logo"></div>

                <ul id="navCont">        
                    <li><a href="blogs.html">blogs</a></li>
                    <li><a href="products.html">products</a></li>
                    <li class="active"><a href="experts.php">Expert</a></li>
                    <li><a href="events.html">events</a></li>
                    <li><a href="business.html">Business</a></li>       
                </ul>

                <div class="rightHeadCont">
                    <div class="smIcon fbIcon"><a href="#"></a></div>
                    <div class="smIcon twtIcon"><a href="#"></a></div>

                    <form id="search">
                        <input type="submit" value="Submit" class="searchBtn">
                        <input type="text" name="search" placeholder="search" class="searchInput">            
                    </form>
                </div>
            </div>
        </div>


    <div class="breadCrumbs noprint">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a>></a></li>
            <li><a>Expert</a></li>
        </ul>
    </div>

    <div class="cl"></div>

    <div class="container">

        <ul class="banner noprint">
          <li><img src="images/headerImg.jpg" /></li>
          <li><img src="images/headerImg.jpg" /></li>
          <li><img src="images/headerImg.jpg" /></li>
          <li><img src="images/headerImg.jpg" /></li>
        </ul>
        <div class="bannerShdw noprint"><img src="images/bannerShdw.jpg" width="100%" height="13"></div>

        <div class="titleCont">
            <h1>Expert</h1>
            <ul id="docIcons">
                <li class="a"><a href="#"></a></li>
                <li class="b"><a href="javascript:window.print()"></a></li>
                <li class="c"><a href="#"></a></li>
                <li class="d"><a href="#"></a></li>
            </ul>
        </div>

<?php
        $expertsql = "SELECT * FROM experts WHERE is_active = '1' ";
        $expertex = mysqli_query($db,$expertsql);

        $ispresent = @mysqli_num_rows($expertex);

        if($ispresent > 0)
        {
            while($experts = mysqli_fetch_assoc($expertex))
            {
    ?>    
                 <div class="expertCont">
                    <div class="imgCont">
                        <div class="imgHold">
                            <img src="<?php echo base_url;?>thumbnail.php?file=admin/uploads/experts/<?php echo $experts['image'];?>&width=170&height=169&maxw=170&maxh=169">
                        </div>
                    </div>

                    <h2><?php echo ucwords($experts['name']);?></h2>
                    <?php echo trim($experts['short_description']);?>

                    <div class="readMore">
                        <a href="expert-detail.php?id=<?php echo $experts['id'];?>">Read more ></a>
                    </div>
                </div>
    <?php
            }
        }
        else
        {
            echo 'No Expert Found';
        }
    ?>


</div>

CSS： -

@media print
{
    .noprint {display:none;}
}

打印时我不想显示的部分是： - noprint并且我已向此类声明了display：none。它也被隐藏但它在顶部留下空白页面。请参见下面的屏幕截图：

enter image description here

如何删除顶部的空白区域？我也看到html @MEDIA print {}, to hide markup leaves blank space in the print，但它对我不起作用。提前致谢

编辑： -

CSS： -

    .headerCont {
    width: 100%;
    height: 85px;
    background: url(../images/headerBg.jpg) repeat-x bottom center;

.breadCrumbs {
width: 1001px;
margin: 0 auto;
height: 38px;
}

.bx-wrapper {
position: relative;
margin: 0 auto 60px;
padding: 0;
}

.bannerShdw {
width: 100%;
height: 13px;
margin-bottom: 30px;
}

Answer 1

如果你的headerCont类有css，它允许类具有任何其他显示值和/或高度，即使在打印时你仍然可以看到该空间。我建议你使用！important：

@media print
{
    .noprint {
        display:none !important;
        height:0px !important;
    }
}

window.print（）;在打印时，它会在顶部留下空白区域

1 个答案: