CSS: Hidden elements still take up space on printed output

倾然丶 夕夏残阳落幕 提交于 2021-02-18 20:49:40

问题


I'm using css to only print a section of a page:

    body {
 visibility:hidden;
    }
    .print {
     visibility:visible;
     background-color: white;
     margin: 0;
    } 

The section above the element I want to print gets properly hidden in the print output, however it still takes up the area of space. I tested this by making a long vertical list of words. In the print output the same area of white space occurs without the words and then the element output occurs. This problem occurs on chrome and mozilla only. I've also tested the browser's margin options and that's not the problem.

Any ideas?


回答1:


You want display:none not visibility:hidden. The latter makes the element invisible, but doesn't remove it from the document flow.




回答2:


Use @media for printing. For example:

@media print {
  * {display: none;} /*or if you want only the body*/ body {display: none;}
  .print {display: block;}
}

(only a rough example. an actual stylesheet should include all elements of a page instead of wildcards)

Then the stylesheet is only used when printing, or print previewing.




回答3:


if we want display:inline-block or display:block along with visibility hidden.

Then we can use follwing css as a workaround.

{
    visibility:hidden
    width:0px;
    height:0px 
}



回答4:


Use display:none;




回答5:


Try using display: none; instead.




回答6:


use display:none; as you want to display only print and no part of body.




回答7:


Even visibility:collapse; does it! :)



来源:https://stackoverflow.com/questions/3046311/css-hidden-elements-still-take-up-space-on-printed-output

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!