Заставьте DIV покрывать 100% области просмотра вместо 100% тела - PullRequest
Новая
       10

Заставьте DIV покрывать 100% области просмотра вместо 100% тела

8 голосов
/ 03 декабря 2010

Мой пост касается http://www.thepostboard.net

Мне нужно сделать так, чтобы черный ящик, который в настоящее время покрывает 100% области просмотра, покрывал всю страницу. Вы сможете заметить это только в том случае, если вашему экрану нужна полоса прокрутки для просмотра веб-сайта - в противном случае она выглядит хорошо.

У меня есть наложенный div, установленный на: 

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

У меня также установлено тело: 

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

Но по какой-то причине на моем ноутбуке, если я прокручиваю вниз, я вижу край DIV, и ничего не блокируется под ним.

Цель этого - создать собственный лайтбокс для веб-сайта. Я отключил Javascript, который затемняет окно, чтобы вы могли видеть эффект.

Как мне сделать так, чтобы она охватывала всю страницу, а не только область просмотра?

(Мой ноутбук размером 1366x768, так что, вероятно, вы увидите его на любом устройстве с разрешением по высоте <= 760). </p>

Ответы [ 4 ]

17 голосов
/ 03 декабря 2010

<div> должно быть 

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

Затем он останется в пределах размеров области просмотра и «переместится» с помощью полосы прокрутки.

Редактировать: он будет охватывать весь видовой экран, только если <body> имеет стиль 

margin: 0;
padding: 0;
3 голосов
/ 19 июля 2012

Это решение лучше всего подействовало на меня: 

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

Нет необходимости стилизовать любые другие элементы, кроме тега.

0 голосов
/ 09 декабря 2014 
<!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 голосов
/ 03 декабря 2010

попробуйте добавить этот CSS: 

html {
height: 100%;
margin 0;
}
...