Проблема с нижним колонтитулом css - PullRequest
Новая
       23

Проблема с нижним колонтитулом css

1 голос
/ 21 января 2010

У меня проблема с веб-страницей.

Я использую свойство min-height, чтобы разместить нижний колонтитул внизу страницы (если содержимое недостаточно длинное) и после содержимого (если содержимое длиннее окна). Существует множество учебных пособий, описывающих этот метод, и я тоже сделал это таким образом. 

html, body { height: 100%; }
.container { 
    min-height: 100%; 
    position: relative;
}
.footer {
    position: absolute;
    bottom: 0;
}

и некоторый другой код. Это работает нормально тогда.

Проблема возникает, когда я создаю два дополнительных элемента div для добавления теней к элементу контейнера. У меня есть: 

<div class="left-shadow">
    <div class="right-shadow">
        <div class="container">
        ...
        </div>
    </div>
<div>

Я полагал, что html и рост тела остаются на уровне 100%, div с левой тенью имеет минимальную высоту 100%, а высота с правой тенью и контейнером составляет 100% (я предполагаю, что 100% будет означать 100% высота родительского элемента).

Тем не менее, он не работает (в Firefox, он работает в Chrome, мне не очень важен IE), и я попробовал все виды комбинаций, чтобы сделать это правильно, но безрезультатно. Любая помощь будет оценена.

РЕДАКТИРОВАТЬ: (частичный код) 

<html>
    <head>
    ...
    </head>
    <body>
        <div class="left-shadow">
            <div class="right-shadow">
                <div class="container">

                    <div class="header">
                        header content
                    </div>

                    <div class="content" >
                       content goes here
                    </div>


                    <div class="footer">
                        footer content here
                    </div>


                </div> <!-- end container div -->
            </div>
        </div>
    </body>
</html>

И соответствующие css: 

html {
    overflow-y: scroll;
    height: 100%;
}

body {
    margin: 0 0 0 0;
    height:100%;
}

.left-shadow
{
    width: 1084px;
    background: url("images/left-shadow.png") repeat-y left; 
    /* both bg images are 30px wide.  1024 + 30 + 30 = 1084px */
    margin: auto;
    min-height: 100%;
}

.right-shadow
{
    width: inherit;
    background: url("images/right-shadow.png") repeat-y right;
    margin: auto;
    height: 100%;
}


.container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    width: 1024px;
    height: 100%;
}

РЕДАКТИРОВАТЬ 2: Так что я только что узнал, что этот вопрос относится к доктайпу. Так что теперь я буду задавать вопросы в нужном месте. Но так как это уже произошло, я бы попросил, чтобы люди отвечали так или иначе, не вдаваясь в то, где вопросы должны быть опубликованы. Спасибо.

Ответы [ 2 ]

1 голос
/ 21 января 2010

Прежде всего, для создания эффекта тени используйте CSS. Если решение CSS не то, что вы ищете, возможно, попробуйте установить тень в качестве фонового изображения .container. Сейчас ваша разметка перегружена ненужными элементами.

Но если эта дополнительная наценка - единственный способ сделать то, что вы хотите, попробуйте что-то вроде этого: 

* {
    margin: 0;
    padding: 0;
}

html, body, .shadow, #container {
    min-height: 100%;
}

#container {
    position: relative;
}

#content {
    padding-bottom: 55px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;

    background: #0a0;
}

И HTML-разметка (эти теневые дивы делают его ужасным): 

<body>
    <div id="shadow-left" class="shadow">
        <div id="shadow-right" class="shadow">
            <div id="container">
                <div id="content">
                    Page contents
                </div>
                <div id="footer">
                    Footer
                </div>
            </div>
        </div>
    </div>
</body>
0 голосов
/ 21 января 2010

Я действительно рекомендую использовать это простое решение вместо «липкого нижнего колонтитула». Просто избавляется от проблем: http://ryanfait.com/sticky-footer/

Все, что для этого требуется, это чтобы вы могли определить фиксированную высоту нижнего колонтитула, что не должно быть проблемой практически во всех случаях.

Работает во всех распространенных браузерах!

...