VPF::div на всю высоту - Форум программистов

zammar

Дата 11.12.2013, 21:37 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 289
Регистрация: 30.10.2008

Репутация: нет
Всего: нет

Нужно растянуть <div class="wrapper"> на всю высоту окна браузера. Ниже способ как я это делаю.
Но при этом не пойму почему появляется вертикальная прокрутка в данном макете?

Код


<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>new_file</title>
        <meta name="description" content="">
        <meta name="author" content="azam">

        <meta name="viewport" content="width=device-width; initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="./s.css">

        <link rel="shortcut icon" href="/f.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    </head>
    <body>
        <div class="wrapper">
            <header>

                <h1>new_file</h1>

            </header>
            <nav>
                <p>
                    <a href="/">Home</a>
                </p>
                <p>
                    <a href="/contact">Contact</a>
                </p>
            </nav>

            <div>

            </div>

            <footer>
                <p>
                    &copy; Copyright  by azam
                </p>
            </footer>
        </div>
    </body>
</html>

Код


html{
height:100%;
}
body{
height:100%;
margin:0;
padding:0;
}
body div.wrapper{
height:100%;
position:relative;
}

Linless

Дата 12.12.2013, 07:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 3.12.2013

Репутация: нет
Всего: нет

Код


h1 { margin: 0; padding: 0; }

zammar

Дата 13.12.2013, 13:53 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 289
Регистрация: 30.10.2008

Репутация: нет
Всего: нет

Linless, спасибо.

Но не понятно почему маргин тега h1 дает вертикальную прокрутку?
А маргин дива не дает

Код


....   <p>
                    <a href="/contact">Contact</a>
                </p>
            </nav>
            <div style="margin-top:10px;">
            </div>
            <footer>
                <p>....

Linless

Дата 13.12.2013, 14:18 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 3.12.2013

Репутация: нет
Всего: нет

Если сделаешь так

Код


<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>new_file</title>
        <meta name="description" content="">
        <meta name="author" content="azam">
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="./s.css">
        <link rel="shortcut icon" href="/f.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <style>
        html{
        height:100%;
        }
        body{
        height:100%;
        margin:0;
        padding:0;
        }
        body div.wrapper{
        height:100%;
        position:relative;
        }
        h1{
            padding: 0; margin: 0;
        }
        </style>
    </head>
    <body>
        <div class="wrapper">
         <div style="margin: 10px;">
            </div>
            <header>
                <h1>new_file</h1>
            </header>
            <nav>
                <p>
                    <a href="/">Home</a>
                </p>
                <p>
                    <a href="/contact">Contact</a>
                </p>
            </nav>
            
            <footer>
                <p>
                    &copy; Copyright  by azam
                </p>
            </footer>
        </div>
    </body>
</html>

То тоже появится вертикальная прокрутка.

Когда сверху, отступ получается не от общего блока, а от окна браузера. Точнее отступ должен делаться от какого-то блока, в данном случае, когда сверху стоит элемент делается от окна браузера. А когда div находится внутри то отступ делается от элемента, который находится выше.

Это сообщение отредактировал(а) Linless - 13.12.2013, 14:20

zammar

Дата 16.12.2013, 15:11 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 289
Регистрация: 30.10.2008

Репутация: нет
Всего: нет

Спасибо.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »