Невозможно сделать нижний колонтитул в нижней части страницы

-1

У меня возникла проблема с использованием липкой нижней части, то есть чтобы нижний колонтитул оставался на самой нижней части страницы, я думаю, что эта проблема связана с тем, что я использую 2 divs для отображения округлых углов для моей страницы, я искал все возможные решения и пробовал их, ничего не работает.Невозможно сделать нижний колонтитул в нижней части страницы

Так в основном, это мой дизайн:

<div class="global"> 
    <div class="wrapper"> 
     <div class="banner"></div> 
     <div class="content"></div> 

     <div class='footer'> 
     <div class='footercontent'>COPYRIGHT INFO</div></div> 
    </div> 
</div>

Это мой CSS:

body { 
font-family: Verdana, Geneva, sans-serif; 
} 
#global { 
margin: 0 auto; 
width: 85%; 
min-width: 1020px; 
} 
.wrapper { 
    background: #FFFFFF; 
} 
.footer { 
    background: url('../Images/roundedcornerRIGHT.gif') no-repeat bottom right; 
} 
.footer div { 
    height: 40px; 
    background: url('../Images/roundedcornerLEFT.gif') no-repeat bottom left; 
} 
.footercontent { 
    text-align: center; 
    font-size: small; 
}

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

источник

2013-12-22 InnovativeDan

Проблема в том, что элемент '# global' не доходит до конца. Используйте Firebug, чтобы осмотреть его или выбросить границу в своем css, и это станет ясным. Вам нужно получить это, чтобы пойти в нижнюю часть, * затем * ваш нижний колонтитул может перейти на дно. Примечание: чтобы получить максимальную высоту, вы, вероятно, захотите сделать что-то вроде 'html, body {height: 100%;}', а затем '# global {height: 100%;} –

@BuddhistBeast в теории да , а потому, что это извлеченная часть моего кода, поэтому я не уверен, точно ли она отражает то, над чем я работаю. – InnovativeDan

@cale_b, вы правы, я попытался установить границу, ни одна из Divs не простирается до нижней части страницы, ДАЖЕ ПОСЛЕ добавления высоты: 100%; на #global и body. – InnovativeDan

Попробуйте это:

.footer { 
    background: url('../Images/roundedcornerRIGHT.gif') no-repeat bottom right; 
    position: absolute; 
    bottom: 0; 
}

источник

2013-12-22 19:08:25

не работает, весь нижний колонтитул, кажется, вырвался из обертки и изменил размер, моя сеть использует дизайн жидкости, так что я имею в виду, что ширина нижнего колонтитула больше не того размера, что и основной дизайн. Посмотрите на это изображение: http://img809.imageshack.us/img809/5605/xvti.png – InnovativeDan

Если вы хотите колонтитула в нижней части дают минимальную высоту содержимого.

min-height: 800px;

источник

2013-12-22 19:09:13 AbhinavRanjan

это работает, но никто не собирается жестко указывать минимальную высоту для жидкого дизайна страницы, каждый посетитель сайта собирается быть на разных разрешениях экрана. – InnovativeDan

Пробовал ли это? Http: //stackoverflow.com/questions/9642460/footer-at-the-bottom-in-fluid-layout – AbhinavRanjan

Изменить разметку на это:

<body> 
<div class="wrapper"> 
     <div class="banner"></div> 
     <div class="content"></div> 
    </div> 

    <div class='footer'> 
     <div class='footercontent'>COPYRIGHT INFO</div></div> 
    </div> 
</body>

А затем добавить эти стили:

.footer { 
position:fixed; 
left:0px; 
bottom:0px; 
width:100%; 
}

источник

2013-12-22 19:12:47

попробовал это, но мне нужно удалить «left: 0px;» и "ширина: 100%;" потому что я использую центрированный дизайн с шириной не 100%. но после его удаления это происходит: http://img809.imageshack.us/img809/5605/xvti.png – InnovativeDan

Итак, если вы хотите, чтобы все, что вы сейчас делаете .. У меня есть быстрое решение для вас. Теперь несколько замечаний. Я добавил переменную высоты в свой класс «обертка», потому что мне нужно было ее измерить, как если бы внутри самой оболочки было место. Я также пошел вперед и добавил несколько цветов, чтобы сообщить мне, где я. В любом случае, самое простое решение - взять ваш нижний колонтитул и поместить его за пределы обертки. Как все это работает, нижний колонтитул появляется внутри класса-обертки, единственная проблема заключается в том, что в этом классе ничего не появляется, что приводит к тому, что нижний колонтитул является единственным. Создание проблемы с этим нижним колонтитулом на вершине. Однако, если вы хотели бы быть в курсе каждой страницы, перемещая колонтитул вниз к нижней части глобальной DIV должно быть свое затруднительное, код ниже:

<div class="global"> 
    <div class="wrapper"> 
     <div class="banner"></div> 
     <div class="content"></div> 
    </div> 
    <div class='footer'> 
     <div class='footercontent'>COPYRIGHT INFO</div> 
    </div> 
</div>

Так что проблема действительно была в HTML, не CSS. Вы можете сохранить свой CSS или сыграть с ним, как вам заблагорассудится, но чтобы лучше описать то, что я говорю, я играл в fiddling (haha) с JsFiddle для вас :) Комментарий ниже, если мне нужно больше понять, что я говорю!

источник

2013-12-22 19:53:10 BuddhistBeast

Вот почему я не переместил нижний колонтитул из оболочки: http://img541.imageshack.us /img541/57/nxq1.png – InnovativeDan

Технически .. «global» - это ваша обертка, а не обертка. Вы можете изменить это, просто вытащив «глобальный» div в целом, а затем поместив нижний колонтитул на дно обертки , – BuddhistBeast

Вот как выглядел бы ваш код без «глобального» div http://jsfiddle.net/XqNzp/3/ Которое все еще работает отлично. – BuddhistBeast

Невозможно сделать нижний колонтитул в нижней части страницы

ответ

Смежные вопросы