我使用window.print()打印页面，但我有页眉和页脚包含页面标题，文件路径，页码和日期。如何清除它们？

我试着打印样式表。

#header,#nav,.noprint
{
display: none;
}

请帮忙。谢谢。

。 。在Chrome中，可以隐藏此自动页眉/页脚

@page { margin: 0; }

。 。由于内容将扩展到页面限制，因此页面打印页眉/页脚将不存在。你应该，当然，在这种情况下，在你的body元素中设置一些边距/ paddings，使内容不会一直延伸到页面的边缘。由于普通打印机只是无法获得无边距打印，它可能不是你想要的，你应该使用这样的东西：

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

。 。可悲的是，它目前只适用于Chrome。对于其他浏览器，您需要即时创建PDF并打印(您可以创建一个自动打印PDF嵌入JavaScript)。最终，对“@page”指令的支持将提高，您将能够在所有浏览器中使用纯CSS解决方案。希望迟早。

我正在努力从使用表的布局目的到使用div(是的，是伟大的辩论)。我有3个div，一个标题，内容和页脚。页眉和页脚各为50像素。如何获取页脚div留在页面的底部，内容div填充之间的空间？我不想硬编码内容div的高度，因为屏幕分辨率可以改变。

总结(这是来自Traingamer提供的 CSS Sticky Footer链接)，这是我使用的：

html,body 
{ 
    height: 100%; 
} 

#divHeader
{
    height: 100px;
}

#divContent
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
}

#divFooter,#divPush
{
    height: 100px; /*Push must be same height as Footer */
}

<div id="divContent">
    <div id="divHeader">
        Header
    </div>

    Content Text

    <div id="divPush"></div>
</div>
<div id="divFooter">
    Footer
</div>

我试图设计一个页面,一个标题,一个主要的div可以延伸到垂直景观的100％(减去页眉和页脚)和页脚.喜欢这张照片：

我可以让头和主div工作.喜欢这个：

<div id="wrapper">

        <div>HEADER</div>
        <div>MAIN</div>
        <div>FOOTER</div>

    </div>

有了这个CSS：

html {
    height: 100%;
 }

 body {
    margin: 0;
    padding: 0;
    height: 100%;
 }

.header_div{

    height: 40px;
    width: 100%;
    background-color: #000000;

}

.main_div{

    margin-bottom:40px;
    margin-top:40px;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color: red;
}


.footer_div{

    position: relative;
    height: 40px;
    width: 100%;
    background-color: blue;
}

所以主要的div从顶部开始40px,以便标题,然后从底部停止40px的页脚.这样做很好,但是我不能让脚下的div显示在主div下方.现在的位置是：相对它将页脚放在主div上.如果我使用position：absolute将它放在主div下面.

我相信我只是做错了,因为CSS不是我的事情.

对此的任何帮助将是巨大的.

谢谢

使用flexBox：

*{ margin:0; Box-sizing: border-Box; }/* Quick reset */

body { /* or any parent wrapper */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>