Javascript window.print（）；打印时在顶部留下空白_Javascript_Html_Css_Printing

Javascript window.print（）；打印时在顶部留下空白

javascript html css printing

Javascript window.print（）；打印时在顶部留下空白,javascript,html,css,printing,Javascript,Html,Css,Printing,这是我的密码： <body> <div class="headerCont noprint"> <div class="headerHold"> <div class="logoCont"><img src="images/logo.jpg" width="104" height="74" alt="Logo"></div>

这是我的密码：

        <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>

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

如何去除顶部空白区？我也看到了，但它对我不起作用。提前谢谢

编辑：-

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;
}

如果您的headerCont类具有css，该css使该类具有任何其他显示值和/或高度，则即使在打印时，您仍可能看到该空间。我建议你用！重要：

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

你是说，.noprint{display:none！important；}谢谢你的回复，但我试过了，它不起作用，没有这样的css会显示值Share you headerCont class Declaration与我们共享。还有面包屑。@Techno如果你在@media screen{}中设置display none，空间还在吗？在那里测试比一直测试打印更容易。@VolkanUlukut查看我的编辑，我添加了css代码

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