Стиль управления div-тегом, вставленным движком ember
Я хочу, чтобы мое приложение ember заполняло высоту области просмотра. Это не работает, как ожидалось, потому что ember вставляет div, который я не могу контролировать между тегом body и моим первым тегом в application.hbs.
Мое application.hbs:
<div class='page'>
{{outlet}}
</div>
Мой Css:
body {
background-color: #ccddee;
height: 100vh;
min-height: 100vh;
margin: 0px;
}
.page {
width: 780px;
height: 100%;
background-color: #F7F7F7;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
Но визуализированный HTML это:
<html>
<body ...>
<script ....>
<div id="ember376" class="ember-view">
<div class=page">
......
</div>
</div>
</body>
</html>
Я не могу контролировать стиль первого div после элемента script. ("ember-view" также используется многими другими тегами, и "ember376", я предполагаю, может измениться на другое число без моего контроля.)
Я использую новейшую версию ember (1.13.5)
3 ответа
Если вы хотите добавить класс специально к элементу представления приложений, вы можете сделать это:
App.ApplicationView = Ember.View.extend({
classNames: ['full-height']
});
Тогда CSS:
.full-height {
height: 100vh;
}
Или вы можете просто нацелиться на первый .ember-view с селектором прямого потомка в CSS:
body > .ember-view {
height: 100vh;
}
Если все, что вам нужно, это стилизовать первый div после тега script, тогда вы сможете использовать Смежный селектор братьев и сестер в CSS.
script + div {
...
}
Однако я не уверен, что это будет хорошей идеей, поскольку я не думаю, что вы можете предположить, что div 'ember-view' всегда будет первым div после тега script.
Минимальный JS ответ. В шаблоне представления или в приложении js добавьте следующий JavaScript:
document.documentElement.classList.add('full-height');
А затем определите свой полноразмерный CSS для этого класса на элементе, на который вы хотите нацелиться (пример ниже)
.full-height > div.ember-view {
height: 100vh;
}