Высота надреза

Я пытаюсь получить представление корня для моего приложения 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.

Спасибо заранее!

Ответы

Ответ 1

У меня была та же проблема, которая пыталась заставить липкие нижние колонтитулы работать с Ember JS и Bootstrap. Как вы заметили, проблема заключается в том, что Ember JS создает представление в контейнере div, который не получает 100% высоты.

Как только Ember отображает 1 непосредственный ребенок .ember-view в <body> (т.е. вид приложения). Мы можем использовать этот CSS, который будет работать в браузерах, включая IE8.

/* Works in all browsers, does not effect other views within your application */
body > .ember-view {
    height: 100%;
}

Это не влияет на .ember-view, которые являются субвью в приложении, потому что они не будут прямыми дочерними элементами вашей страницы <body>.

Ответ 2

Если вы определяете представление приложения, вы можете настроить такие вещи, как класс:

App.ApplicationView = Ember.View.extend({
    classNames: ["ember-app"]
})

Затем вы можете определить свой css:

.ember-app {
    height: 100%;
}

Ответ 3

Здесь я могу дать два ответа, которые на самом деле не связаны с Ember.JS
1) Как установить корневой элемент высоты EMberApp до 100%. Вам не нужно делать какие-либо твики в коде Ember App. В CSS просто установите высоту класса ember-view на 100%.

.ember-view {
 height: 100%;
}

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

Но ваше фактическое требование - 2) Создание нижнего колонтитула занимает только нижнюю часть страницы. Фактически вы можете сделать нижний колонтитул absolute и установить значение bottom на 0.

footer {
position:absolute;
bottom: 0px;
}

Ответ 4

Недавно я столкнулся с этой проблемой, и мне потребовалось некоторое время, чтобы исправить это, и я просто хотел поделиться своим решением с вами, ребята.

"ember-cli": "2.13.1"
"bootstrap": "^ 4.0.0-alpha.6"

Так как user510159 написал, что проблема заключается в заданном классе ember-view.

Решение от Scott добавить свойство height: 100%; в класс ember-view составляет половину решения.

/* Works in all browsers, does not effect other views within your application */
    body > .ember-view {
    height: 100%;
}

Чтобы он работал в моем случае, мне пришлось установить свойства высоты для внутренних элементов div моего html.

<div class=ember-view>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

sccs:

#header {
    height: 20%;
}

#content{
    height: 70%;
}

#footer {
    height: 10%;
}

Надеюсь, это поможет.