Абсолютно позиционированный, свиток переполнения, динамический элемент - PullRequest
Новая
       6

Абсолютно позиционированный, свиток переполнения, динамический элемент

0 голосов
/ 27 октября 2009

Я создаю сложный макет в CSS и должен иметь следующее: 

__________________________________________
|     |                                   |
|     |              filters              |
|     |___________________________________|
|     |                                   |
|     |              Toolbar              |
|     |___________________________________|
| nav |                                   |
|     |                                   |
|     |                                   |
|     |         Content (scroll)          |
|     |                                   |
|     |                                   |
|_____|___________________________________|

Навигация статична, поэтому она всегда отображается. Область содержимого прокручивается сама по себе. Панель инструментов также всегда есть. Однако секция фильтров должна быть динамичной в том смысле, что если она отсутствует, то панель инструментов / содержимое должны перемещаться вверх и занимать пространство, занимаемое фильтрами.

Область содержимого является позицией: абсолютная; с переполнением: авто, и очень похоже на Google Reader. Проблема в том, что мне нужно поступить правильно: 0; верх: 0; Слева направо: 0; и внизу: 0 для правильной работы прокрутки.

Есть идеи, как мне добиться области прокрутки контента, которая пока не отображается поверх панели инструментов / фильтров, если раздел фильтров удален, тогда все движется автоматически, без необходимости указывать дополнительный CSS для компенсации?

Приветствия

РЕДАКТИРОВАТЬ : Хорошо, чтобы было проще, может кто-нибудь сказать мне, как добиться макета Google Reader с помощью CSS, где область контента автоматически перемещается вниз, если вы вводите на панель инструментов новые инструменты, которые вызывают высота панели инструментов для регулировки?

1 Ответ

1 голос
/ 27 октября 2009

Будет ли что-то подобное соответствовать вашим потребностям? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
            #nav {
                position: fixed;
                float: left;
                width: 25%;
                background-color: #F00;
            }

            #filters {
                float: right;
                width: 75%;
                background-color: #FF0;
            }

            #toolbar {
                float: right;
                width: 75%;
                height: 70px;
                background-color: #00F;
            }

            #content {
                float: right;
                width: 75%;
                background-color: #0FF;
                overflow-y: scroll;
                min-height: 400px;
            }

        </style>
    </head>
    <body>

        <div id="nav">this is the nav</div>

        <div id="filters">filters</div>
        <div id="toolbar">topbar</div>
        <div id="content">content</div>

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

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

...