Вложенные Div для создания нижнего колонтитула (пробовали ясно: оба) - PullRequest
0 голосов
/ 28 февраля 2012

Я пытаюсь сделать так, чтобы нижеприведенный «контейнер» был опознан как div-обертка и принимал высоту других элементов. Это позволяет мне динамически изменять размеры других элементов, а размер контейнера изменяется, размещая нижний колонтитул внизу.

Я посмотрел (пару часов сейчас!) На это решение и везде упоминаю, что он ясен: оба или переполнение: авто, ни один из которых не работает

Очень понравилось бы, если бы кто-то мог указать, где я иду не так!

<HTML>
<head>

    <style type="text/css"> 
    body {
                text-align: left;
                font-size: small;
        }
    #Layer-2 {
                position: absolute;
                margin-left: -640px;
                left: 50%;
                top: +0px;
                width: 1280px;
                z-index: 2;
            }


    #Layer-3 {
                position: absolute;
                left: 146px;
                top: 33px;
                width: 687px;
                height: 59px;
                z-index: 3;
            }


    #Layer-4 {
                position: absolute;
                left: 157px;
                top: 125px;
                width: 174px;
                height: 843px;
                z-index: 4;
            }


    #Layer-5 {
                position: absolute;
                left: 361px;
                top: 286px;
                width: 776px;
                height: 682px;
                z-index: 5;
                overflow: auto;
            }
    hr {
            display: block; 
            clear: left; 
            margin: -0.66em 0;
            visibility: hidden;
    }

#container {overflow:hidden;}


    </Style>
</head>
<body>
<div id="container">
    <div id="Layer-2">

            <div id="Layer-5"  >
            Hello World
            </div>

            <div id="Layer-4" >
            Hello World 2
            </div>

            <div id="Layer-3" >
            Hows Things today?
            </div>
        <hr>
         <br style="clear: both; height: 0; visibility: hidden;">
    </div>
    <br style="clear: both; height: 0; visibility: hidden;">
</div>  
    <div WIDTH="100%"> Footer </div>

</body>
</html>

1 Ответ

1 голос
/ 28 февраля 2012

- это скрипка вашего кода после некоторых исправлений. Обратите внимание, что я добавил границы ко всем элементам div, чтобы увидеть, как вложено вечное. Ваша "проблема" - это position:absolute во всех правилах CSS div s. Я также удалил все правила z-index, потому что они больше не являются необходимыми.

Глядя на ваш код, у вас есть некоторые проблемы, которые необходимо исправить:

  • когда вы применяете position:absolute к элементу, он выводит элемент из естественного потока, что означает, что он не повлияет на остальные элементы. Вот почему ваш нижний колонтитул был в верхней части документа.
  • br и hr являются пустыми элементами и должны быть записаны так: <br /> и <hr /> и т. Д.
  • Я бы порекомендовал хранить все стили CSS в области <style> вместо того, чтобы использовать их повсюду со встроенным стилем. Например: вместо <div WIDTH="100%"> используйте css, например #footer {width:100%}, и поместите его в заголовок документа или во внешний файл.
  • overflow:hidden и clear:both должны работать всегда. Если они этого не делают, проверьте код на наличие ошибок.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...