Question

我希望我的余烬应用填充视口的高度。它没有按预期工作，因为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的样式。（＆＃34; ember-view＆＃34;也被许多其他标签使用，＆＃34; ember376＆＃34;我假设可能会在没有我控制的情况下更改为另一个数字。）

我正在使用最新的余烬版本（1.13.5）

Answer 1

如果要将类专门添加到应用程序视图元素，可以执行以下操作：

App.ApplicationView = Ember.View.extend({
  classNames: ['full-height']
});

然后css：

.full-height {
    height: 100vh;
}

或者您可以使用CSS中的直接后代选择器定位第一个.ember-view：

body > .ember-view {
    height: 100vh;
}

Answer 2

最小的JS答案。在您的视图模板或应用程序js中，添加以下JavaScript：

document.documentElement.classList.add('full-height');

然后在要定位的元素上为该类定义全高CSS，（以下示例）

.full-height > div.ember-view { 
  height: 100vh; 
}

Answer 3

如果您要做的就是在脚本标记之后设置第一个div的样式，那么您应该可以在CSS中使用Adjacent Sibling Selector。

#jquery-script-menu {
position: fixed;
height: 90px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #316594;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
padding: 10px 0;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

.jquery-script-center {
width: 960px;
margin: 0 auto;
}
.jquery-script-center ul {
width: 212px;
float:left;
line-height:45px;
margin:0;
padding:0;
list-style:none;
}
.jquery-script-center a {
    text-decoration:none;
}
.jquery-script-ads {
width: 728px;
height:90px;
float:right;
}
.jquery-script-clear {
clear:both;
height:0;
}

*{
    margin:0;
    padding:0;
}
body{
    font-family:"Trebuchet MS", "Myriad Pro", Arial, sans-serif;
    font-size:14px;
    background:#fefefe;
    color:#333;
    text-shadow:1px 1px 1px #fff;
    overflow-x:hidden;
}
h1{
    font-size:30px;
    color:#666;
}
h2{
    font-size:20px;
    padding:10px 0px 10px 0px;
    margin:15px 0px 20px 0px;
}
a{
    color:#555;
    text-decoration:none;
}
a:hover{
    color:#222;
}
p{
    padding:5px 0px;
}
.wrapper{
    width:960px;
    margin:20px auto;
}
.clear{
    clear:both;
}

    /* ----------->>> GridView <<<----------*/
        .gridView
        {
            width: 100%;
            clear: both;
            margin: 10px 0;
            border: medium none !important;
            border-collapse: collapse;
        }
        .gridView tr td
        {
            border: 1px solid #aaa;
            vertical-align: top;
        }
        .gridView thead tr, .footer
        {
            font: bold 11px Arial;
            vertical-align: middle;
            text-decoration: none;
            text-align: center;
        }

        /* --->>> HeaderStyle (cabeçalho) <<<---*/
        .gridView thead tr
        {
            color: #333;
            background: #fff url(../images/bg-header-grid.png) bottom repeat-x;
            vertical-align: middle;
            height: 25px;
        }
        .gridView thead tr th
        {
            border: 1px solid #E2E6E6;
            border-bottom: 3px solid #E5E5E5;
            vertical-align: middle;
        }
        .gridView thead tr a
        {
            font: bold 11px Arial, Verdana;
            color: #333;
            padding: 0 0 0 10px;
            text-decoration: underline;
            background: url(../images/Icones/ico-ordem.gif) left no-repeat;
            vertical-align: middle;
        }
        .gridView thead tr a:hover
        {
            color: #06c;
            background: url(../images/Icones/ico-ordem-hover.gif) left no-repeat;
        }

        /* ---->>> FooterStyle (rodapé) <<<------*/
        .footer
        {
            height: 20px;
            width: auto;
            margin: 0 auto;
            text-align: center;
            padding: 5px;
        }
        /*PagerStyle*/
        .footer a, .footer span
        {
            color: #555;
            padding: 2px 6px 2px 6px;
            border: 1px solid #bcbcbc;
            background: #F1F1F1 url(../images/bg-pg.png) bottom repeat-x;
            text-decoration: none;
        }
        .footer a:hover
        {
            color: #C40B17;
            background-color: #fff;
            background-image: none;
            border: 1px solid #890812;
        }
        .footer span
        {
            color: #fff;
            background: #D7403F url(../images/bg-pg-focus.png) bottom repeat-x;
            border: 1px solid #890812;
        }


        /* ------------>>> Grid <<<--------------*/
        .grid, .gridAlternada, .gridDestacada
        {
            font: 11px Arial,Verdana;
            text-align: left;
            text-align: center;
            vertical-align: middle;
        }
        .grid:hover, .gridAlternada:hover, .gridDestacada:hover
        {
            color: #000;
            background: #D4E5F6 url(../images/bg-dia.png) 0 0 repeat-x;
        }

        .grid
        {
            background-color: #fff;
        }
        /*RowStyle*/
        .gridAlternada
        {
            background-color: #eee;
        }
        /*AlternatingRowStyle*/
        .gridDestacada
        {
            background-color: #FFE082;
            color: #333;
        }
        /*SelectedRowStyle / EditRowStyle*/


        /* -------->>> Link Grid's <<<-----------*/
        .grid a, .gridAlternada a, .gridDestacada a
        {
            color: #384249;
            text-decoration: none;
        }
        .grid a:hover, .gridAlternada a:hover, .gridDestacada a:hover
        {
            color: #000;
            text-decoration: underline;
        }

我不确定这会是一个好主意，但是，我不认为你可以认为'ember-view'div将永远是脚本标签之后的第一个div。

控制由ember引擎插入的div-tag样式

3 个答案: