Я пытаюсь получить представление корня для моего приложения Ember с полной (100%) высотой, безуспешно до сих пор.
Зачем мне это нужно? У меня есть нижний колонтитул, который я хочу выровнять по низу, даже если содержимое страницы не заполняет всю высоту. С этой целью у меня есть следующий CSS:
.push {
height: 60px;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
И HTML (используя щебетать Bootstrap):
<body>
<div class="navbar navbar-fixed-top"><!-- ... --></div>
<div class="content">
<div class="push"><!--//--></div>
<div class="container">
<!-- page content -->
</div>
<div class="push"><!--//--></div>
</div>
<footer>Copyright ... 2013</footer>
</body>
Это отлично работает без Эмбера. Теперь, вводя Ember:
<script type="text/x-handlebars" data-template-name="application">
<div class="navbar navbar-fixed-top"><!-- ... --></div>
<div class="content">
<div class="push"><!--//--></div>
<div class="container">
{{outlet}}
</div>
<div class="push"><!--//--></div>
</div>
<footer>Copyright ... 2013</footer>
</script>
И теперь он больше не работает!
Проклятая вещь вставляет a <div id="emberXYZ" class="ember-view">
, которая содержит все, что само по себе довольно хорошо, за исключением того, что div не имеет полной высоты, а нижний колонтитул просто висит посередине страницы сразу после содержимого.
Я искал решение для решения проблемы, но не смог найти ничего, что позволило бы мне обойти эту проблему. Мое предположение - самый простой способ заставить Ember установить корневой режим на 100% высоту (похоже, не может найти, как это сделать), но, возможно, есть и другой умный трюк, который выполнит то, что я хочу. Каким бы ни было решение, мне нужно, чтобы он был совместим с IE8.
Спасибо заранее!