Проблемы с липким нижним колонтитулом - как получить 100% высоту содержимого без верхнего и нижнего колонтитула

Я написал этот шаблон липкого нижнего колонтитула и хочу, чтобы мой div содержимого имел минимальную высоту 100%. Проблема в том, что когда я это делаю, он выходит под нижний колонтитул с дополнительной высотой заголовка + высота нижнего колонтитула. Как я могу это исправить? Он должен поддерживать также короткое и длинное содержание, как липкий нижний колонтитул. Мне нужно использовать jQuery? Я новичок, ПОЦЕЛУЙ, пожалуйста.

HTML

    <body>
    <form id="form1" runat="server">
        <div class="wrapper">
            <div class="header"></div>
            <div class="content">

                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>

            </div>
            <div class="footer"></div>
        </div>
    </form>
</body>

CSS

html, body {
    min-height:100%;
    height:100%;
}

#form1 {
    min-height:100%;
    height:100%;
    margin:0;
}

.wrapper {
   min-height:100%;
   height:100%;
   position:relative;
}
.header {
   background:#990066;
   height:100px;
}
.content {
   background:#ffffcc;
   padding-bottom:100px;   /* Height of the footer */
   min-height: 100%;
   width: 1120px;
   margin: 0 auto;
}
.footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:100px;   /* Height of the footer */
   background:#333;
}

css footer sticky
person Anamaria Miehs    schedule 28.03.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Этого можно добиться с помощью CSS.

HTML (обратите внимание на небольшое изменение вложенности div нижнего колонтитула)

<body>
    <form id="form1" runat="server">
        <div class="wrapper">
            <div class="header"></div>
            <div class="content">
                ...
            </div>
        </div>
        <div class="footer"></div>
    </form>
</body>

CSS

html, body, #form1 {height: 100%;}

.wrapper {
    min-height: 100%;
}

.content {
    padding-bottom: 150px; /* must be same height as the footer */
}  

.footer {
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
}

Адаптировано отсюда.

http://www.cssstickyfooter.com/using-sticky-footer-code.html

Также быстрая скрипка http://jsfiddle.net/Zf8Fh/3/

person Community    schedule 29.08.2013

arrow_upward
2
arrow_downward 

.content {
    min-height: calc(100% - 100px - 100px);   /* minus header-height minus footer-height */
}

Минимальная высота элемента содержимого установлена ​​на 100% минус 100 пикселей (высота заголовка) и 100 пикселей (высота нижнего колонтитула). Используя функцию CSS calc(), браузер вычисляет точную высоту. Это было бы лучше с точки зрения кроссбраузерной совместимости:

.content {
    min-height: -webkit-calc(100% - 100px - 100px);
    min-height: -moz-calc(100% - 100px - 100px);
    min-height: calc(100% - 100px - 100px);
}
person minke011    schedule 26.08.2013
comment
Не могли бы вы дать несколько слов, чтобы объяснить свой ответ на ОП? - person theJollySin; 27.08.2013
comment
Собственно, из-за некоторых проблем в Opera (пустое пространство внизу) я рекомендую использовать короткий фрагмент jQuery для вычисления высоты элемента содержимого. Вы можете найти его здесь (nicholasbarger.com / 2011/08/04 /) Это более надежное решение, и вам не нужно беспокоиться о проблемах совместимости с браузером :) - person minke011; 30.08.2013

arrow_upward
0
arrow_downward

Вам просто нужно зафиксировать позицию класса .footer в css, как показано ниже

.footer {
  position:fixed;
  bottom:0;
  width:100%;
  height:100px;   /* Height of the footer */
  background:#333;
}
person Nilesh    schedule 28.03.2013
comment
Мне не нужен фиксированный нижний колонтитул. Когда контента мало, оно должно оставаться внизу. Когда есть длинный контент, я хочу, чтобы нижний колонтитул естественным образом опускался в конце контента. Нижний колонтитул - не моя проблема. Я хочу то же самое с div содержимого: когда содержимого мало, я хочу, чтобы div содержимого растягивался до нижнего колонтитула. Когда контента много, я хочу, чтобы div контента естественным образом растягивался, чтобы содержать весь контент. - person Anamaria Miehs; 28.03.2013
comment
Я думаю, что это невозможно без использования js, поэтому вам следует добавить несколько js, чтобы добавить высоту в div содержимого в соответствии с высотой страницы. - person Nilesh; 28.03.2013