Geek Answers Handbook

DIV 100% view instead of 100% body

My post refers to http://www.thepostboard.net

I need to make a black box, which currently covers 100% of the viewport, closes the entire page. You can only notice this if your screen needs a scroll bar to view the website - otherwise it looks fine.

I have an overlay set of divs:

position: absolute; height: 100%; width: 100%;

I also have the body installed:

 height: 100%; margin: 0px 0px; padding: 0px; 0px;

But for some reason on my laptop, if I scroll down, I see the edge of the DIV, and nothing is blocked under it.

The purpose of this is to create a custom lightbox for the website. I turned off Javascript, which reduces the size of the window so you can see the effect.

How to do this so that it covers the entire page, and not just the viewing area?

(My laptop is 1366x768, so you'll probably see it on anything with a height resolution <= 760).

+8
javascript html layout height
source share
4 answers

<div> should be

 top: 0; left: 0; position: fixed; width: 100%; height: 100%; background-color: red;

It will then remain within the viewport and “move” using the scroll bar.

Edit: it will only cover the entire viewport if <body> has a style

 margin: 0; padding: 0;
+17
source share

This solution worked best for me:

 #overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }

No need to erase any other items except the tag.

+3
source share

try adding this css:

 html { height: 100%; margin 0; }
0
source share
 <!DOCTYPE html> <html> <head> <title>image background test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale = 1.0, user-scalable = no, maximum-scale=1"> <style> body{ margin:0; padding:0; width:100%; height:100%; max-width:100%; overflow-x:hidden; } article, aside, div, dt, figcaption, footer, form, header, hgroup, html, main, nav { display: block; width:auto; height:100%; } .main{ position:static;/* Don't Change - Positioning */ top:0; left:0; height:100%; max-height:100%; } .background{ position:absolute;/* Don't Change - Positioning */ top:0; left:0; right:0; bottom:0; background:url('images/beach.jpg'); background-position:center center; background-repeat:no-repeat; background-size:cover; margin:0; } @media (min-aspect-ratio: 16/9){ .background{ position:absolute;/* Don't Change - Positioning */ width:100%; height:auto; /* actually taller than viewport */ background:url('images/beach.jpg'); background-repeat:no-repeat; background-position:center center; background-size:cover; margin:0; } } @media (max-aspect-ratio: 16/9){ .background{ position:absolute;/* Don't Change - Positioning */ width:auto; /* actually wider than viewport */ height:100%; background:url('images/beach.jpg'); background-repeat:no-repeat; background-position:center center; background-size:cover; margin:0; } } /* If supporting object-fit, overriding 'class="main"' default: */ @supports (object-fit: cover){ .background{ background:url('images/beach.jpg'); background-position:center center; margin:0; top: 0; left: 0; right: 0; object-fit: cover; } } section h1{ width:80%; height:auto; background:#ff0000; margin:20% auto; text-align:center; color:#ffffff; font-size:200%; font-weight:800; line-height:200%; } h2{ text-align:center; margin:0 auto; padding:20%; font-size:200%; line-height:100%; font-weight:800; } </style> </head> <body> <div class="main"> <div class="background"> <section> <h1>Image fits to viewport</h1> </section> </div> </div> <h2>Some Text Here to display that image<br>is fixed toviewport</h2> </body> </html>
0
source share

Source: https://habr.com/ru/post/649784/

More articles:


All Articles