CSS «Липкий нижний колонтитул» с дополнительной оболочкой div

Question

CSS «Липкий нижний колонтитул» с дополнительной оболочкой div

0

Введение

Существует много хороших и хорошо протестированных рецептов для нижнего колонтитула, который всегда находится в нижней части страницы, но не является фиксированным (или перекрывает содержимое). Вот один, который работает для меня: http://ryanfait.com/sticky-footer/

Короче говоря, это работает следующим образом:

HTML:

<html><body>
  <div id="wrapper>SOME CONTENT</div><footer></footer>
</body></html>

CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#wrapper {
  min-height: 100%;
  height: 100%;
  margin: 0 auto -4em;
}
footer {
  height: 4em;
}

Хитрость заключается в том, что #wrapper вынужден использовать 100% доступной высоты, но нижняя часть поля оставляет некоторое пространство для нижнего колонтитула (отрицательный запас равен размеру нижнего колонтитула).

Описание проблемы

При создании приложения с одной страницей некоторые фреймворки javascripts, такие как Ember.js, добавляют дополнительные div к нашей структуре документа (например, для обработки событий). Это создает дополнительную оболочку вокруг нашего оригинального документа, который может выглядеть следующим образом:

<html><body>
  <div class="framework-container">
    <div id="wrapper>SOME CONTENT</div><footer></footer>
  </div>
</body></html>

Этот дополнительный div разрушает нашу настройку CSS. Чтобы улучшить ситуацию, мы хотим сказать, что framework-container должен вести себя точно как body, поэтому мы можем попытаться добавить:

.framework-container {
  position: relative;
  height: 100%;
  min-height: 100%;
}

И это почти работает: если контент меньше высоты страницы. В противном случае между нижним колонтитулом и нижней частью страницы есть заметное расстояние, которое мы не можем принять.

Кто-нибудь знает чистое решение CSS для этой проблемы?

chrmod 10 нояб. 2013, в 19:40

Источник

Теги:

html

css

css3

ember.js

1 ответ

Ещё вопросы

Kingpin2k · Accepted Answer · 2013-11-10T16-21-00.000Z

Я не уверен, что вы сказали, что обертка работает или нет, но вы можете сказать Ember вставить приложение в конкретный элемент и не будет вставлять какие-либо элементы вне (выше) этого элемента.

Установите корневой элемент

App = Em.Application.create({
  rootElement: '#body'
});

HTML

<div id="container">
  <div id="header">I'm a header</div>
  <div id="body"></div>
  <div id="footer">I'm a footer</div>
</div>

CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

http://emberjs.jsbin.com/OPaguRU/1/edit

Я полностью вызвал это из: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Означает ли это, что я могу сказать rootElement: "body" и Ember не будет создавать никаких дополнительных div'ов 'top`-иерархии сверх тех, которые я определил в своих шаблонах?
тело по умолчанию для rootElement. Я только что понял, что вы говорите внизу, так что, возможно, я сбил вас с толку своим комментарием. То, что я сказал, правда, но я не уверен, поможет ли это вам.
В частности, с ember проблема создается представлением приложения, которое добавляет свой div и оборачивает все выходы, которые мы контролируем. Интересно, можем ли мы сказать: App.ApplicationView = Ember.View.extend({ tagName: "script" })
Проверил мой последний комментарий - он не работает, по крайней мере, в моей довольно устаревшей установке с ember 1.0.0-pre2
Попробуйте это. Ember 1.0 был выпущен некоторое время, и вы должны надеяться, как только сможете, произошли некоторые серьезные изменения и исправления.
Ваш jsbin работает хорошо, потому что он использует структуру документа, описанную во «введении». Проблема начинается, если вы хотите, чтобы все содержимое тела отображалось Ember.js. В банкомате вы можете контролировать только содержимое #body и не можете изменять нижний колонтитул или заголовок из Ember (по крайней мере, без хаков :-)). (PS. Я использую новый ember, это другой проект, который в конечном итоге будет использоваться и в этом, но он требует полной замены маршрутизатора, так что это займет некоторое время)
Настройка CSS немного отличается. Я дам попытку. Спасибо за все усилия.