发表新帖
发表新帖

Allow a div to cover the whole page instead of the area within the container

前端 未结
关注
9 1401
执念已碎
执念已碎 2020-12-12 16:45

I\'m trying to make a semi-transparent div cover the whole screen. I tried this:

#dimScreen
{
    width: 100%;
    height: 100%;
    background:rgba(255,255,
相关标签:
9条回答
  • 刺人心
    2020-12-12 17:32

    please try with setting margin and padding to 0 on body.

    <body style="margin: 0 0 0 0; padding: 0 0 0 0;">
    0 讨论(0)
  • 一生所求
    2020-12-12 17:37 
    #dimScreen{
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
}
    0 讨论(0)
  • 死守一世寂寞
    2020-12-12 17:45

    Add position:fixed. Then the cover is fixed over the whole screen, also when you scroll.
    And add maybe also margin: 0; padding:0; so it wont have some space's around the cover. 

    #dimScreen
{
    position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);
}

    And if it shouldn't stick on the screen fixed, use position:absolute;

    CSS Tricks have also an interesting article about fullscreen property.

    Edit:
    Just came across this answer, so I wanted to add some additional things.
    Like Daniel Allen Langdon mentioned in the comment, add top:0; left:0; to be sure, the cover sticks on the very top and left of the screen.

    If you some elements are at the top of the cover (so it doesn't cover everything), then add z-index. The higher the number, the more levels it covers.

    0 讨论(0)
 看不清?
提交回复
热议问题