Как мне наложить фоновые рисунки, развернув пустые теги? - PullRequest
0 голосов
/ 12 августа 2011

Я хочу наложить фоновые изображения, чтобы получить хороший эффект с границами.

Я думаю, что мой код достаточно прост, но у меня проблема в том, что теги не хотят правильно расширяться. Я объясню больше позже. Вот HTML:

    <!doctype html>

    <html>
        <head>


        <title>My blog</title>
            <link rel="stylesheet" type="text/css" href="webdev.css"/>  
        </head>

        <body class='body'>
            <div class='outer'>
                <div class='inner'>
</div>
            </div>
        </body>

    </html>

Таблица стилей:

  .body
{
    min-height:100%;
    width:100%;
    margin-top:0px;
    overflow: hidden;
    display: inline-block;
    display: block;
}

.outer
{
    min-height:100%;
    width:100%;
    overflow: hidden;
    display: inline-block;
    display: block;
}

.inner
{
    min-height:100%;
    width:100%;
}

Я не уверен на 100%, что все же необходимы исправления. По сути, я хочу, чтобы div делала все изображение на весь экран независимо от его размера. Спасибо за любые ответы. Если мне не ясно, не стесняйтесь комментировать, и я объясню больше, но я думаю, что вопрос довольно простой.

Ответы [ 2 ]

1 голос
/ 13 августа 2011

Попробуйте это:

body
{
    height:100%;
}

.outer
{
    height:100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

.inner
{
    height:100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}
1 голос
/ 13 августа 2011

Сделать ширину 100% так же просто, как установить "width: 100%", высота немного сложнее.

Вам нужно иметь "height: 100%" на обоих <html>и <body> -тэг.И затем "высота: авто; высота: 100%; минимальная высота: 100%;"на вашем <div>

Причина, по которой у вас есть два «высоты», заключается в том, что IE6 не понимает «высоту: авто», а затем вместо этого нуждается в «высоте: 100%».

Вы можете увидеть пример этого здесь: http://www.dave -woods.co.uk / wp-content / uploads / 2008/01 / full-height-updated.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...