CSS - Несколько делений высоты 100%? - PullRequest
Новая
       3

CSS - Несколько делений высоты 100%?

3 голосов
/ 12 февраля 2010

Как я понял, для того, чтобы div в действительности имел высоту 100%, родительский div должен быть установлен правильно?

Итак, представьте себе структуру div, которая выглядит следующим образом: 

    <title>A CSS Sticky Footer</title>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>
<body>

    <div class="wrapper">
        <div class="header">Header</div>
        <div class="gallery">gallery</div>
        <div class="push">This is inside the push</div>
    </div>
    <div class="footer">Footer</div>

</body>

Предполагается, что это по существу макет с липким нижним колонтитулом, основанный на макете с липким нижним колонтитулом Райана Фэйтса.

Как в этом случае галерея может иметь 100% высоту, а также обертку?Я не могу понять это.

Мой CSS выглядит так: Точно так же, как CSS Райана, только с добавленным классом галереи. 

* {
         margin: 0;
}

html, body {
         height: 100%;
}

.gallery {
         background-color:blue;
         height: 100%;
}

.wrapper {
         min-height: 100%;
         height: auto !important;
         height: 100%
         margin-left: auto;
         margin-right: auto;
         width:830px;
         margin-bottom: -142px; /* the bottom margin is the negative value of the footer's height */
}

.footer, .push {
         height: 142px;
         margin-left: auto;
         margin-right: auto;
         width: 830px;
}

Ответы [ 2 ]

3 голосов
/ 12 февраля 2010

(удалены все старые вещи)

Вот новый HTML с галереей 100%, надеюсь, это сработает: -) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>   
    <title>A CSS Sticky Footer</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
     <style type="text/css">
     * {
         margin: 0;
        }

        html, body {
            height: 100%;
        }

        .header{background-color: green;position: fixed; top:0;width: 830px;height: 80px; z-index:1;}

        .gallery {background-color:blue;height: 100%;}

        .wrapper {
            height: 100%;
            margin: 0 auto;
            width:830px;
        }

        .footer, .push {
            height: 80px;
            width: 830px;
            background-color: #CCFF00;
            position: fixed;
            bottom:0;
        }

     </style>
</head>
<body>
    <div class="wrapper">
        <div class="header">Header</div>
        <div class="content gallery">gallery</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>
1 голос
/ 12 февраля 2010

Я не знаю, технически ли это ответ, но это скорее ответ, чем комментарий, так что вот так:

Лично мне не нравится подход Ryan Fait Sticky Footer, я предпочитаю тот, который используется здесь: http://www.digital -web.com / extras / positioning_101 / css_positioning_example.php . Для меня это намного более чистое решение, и оно имеет больше смысла с точки зрения дизайна и стандартов. По моему опыту, это работает почти на 100%, а в остальное время изящно ухудшается.

Мои 2цента ...

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

Нет похожих вопросов

...