Ember視圖高度

我試圖讓我的Ember應用程序的根視圖具有完整（100％）的高度，迄今爲止失敗。Ember視圖高度

爲什麼我需要這個？即使頁面內容沒有填充整個高度，我也有一個頁腳，我想將其對齊到底部。爲此，我有以下的CSS：

.push { 
    height: 60px; 
} 

.content { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -60px; 
}

和HTML（使用Twitter的引導）：

<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>

現在它不再有效！

該死的東西插入一個<div id="emberXYZ" class="ember-view">其中包含整個事情，其本身是相當好的，除了div沒有完整的高度和頁腳剛剛掛在頁面的中間內容後。

我搜索了一個解決方案，但找不到任何可以解決此問題的方法。我的猜測是最簡單的方法是讓Ember將根視圖設置爲100％的高度（似乎無法找到如何做到這一點），但也許有一些其他聰明的技巧可以實現我想要的。無論是什麼解決方案，我都需要它至少與IE8兼容。

在此先感謝！

來源

2013-03-26 user510159

爲什麼不''.container> div {min-height：100％; ''？ – 2013-03-26 17:47:14

不幸的是，這並沒有幫助。如果「內容」已經將最小高度設置爲100％，則問題不是「容器」。問題是不支持完整高度的ember-view div。 – user510159 2013-03-26 19:59:04

哦，你的意思是應用程序視圖。 App.ApplicationView = Ember.View.extend（{classNames：['my-class']}） – 2013-03-26 20:09:56

在這裏，我可以做給出兩個實際上不涉及到Ember.JS
1）如何EMberApp高度的根元素設置爲100％的答案 - 你並不需要做的灰燼應用程序代碼中的任何調整。在CSS中，只需將ember-view類的高度設置爲100％即可。

.ember-view { 
height: 100%; 
}

，如果你想避免其他視圖中使用這個造型，你可以使用的視圖的ID爲u這裏指定一個emberXYZ。

但你的實際需求爲
2）製作頁腳只拿page--實際上，你可以讓頁腳absolute和bottom值設置爲0的底部。

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

來源

2013-03-26 17:45:18 thecodejack

感謝您的回答。不幸的是，對於1），在ember-view類中設置高度將與所有其他視圖混淆在一起，並且id中的XYZ部分是動態的（可以通過這種方式解決，但我需要找到一種方法將一個固定的ID添加到根Ember視圖 - 似乎沒有記錄）。對於2），使用絕對位置是有點作弊。任何方式我都可以做到這一點，沒有絕對的，但以一種比Ember更好的方式做到這一點。 – user510159 2013-03-26 20:02:55

要將特定的元素ID分配給一個花括號視圖，你需要設置'elementId'屬性。顯然，按照HTML，它必須在頁面上是唯一的。 – 2013-11-03 19:22:37

如果定義應用程序視圖然後你可以自定義的東西，如類：

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

然後，您可以定義你的CSS：

.ember-app { 
    height: 100%; 
}

來源

2013-08-03 17:23:36

這是灰燼的方式。 – FutoRicky 2016-07-02 22:18:11

我有同樣的問題努力得到粘腳，與Ember JS和Bootstrap一起工作。正如你所指出的，問題在於Ember JS在一個容器內創建視圖，該容器不能達到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>頁面的直接孩子。

來源

2013-11-03 15:58:14 Scott

顯然這2個解決方案不起作用。簡單的.ember-view {height：100％}也不是。不過，我可以在檢查器中看到ember-view class div。有任何想法嗎？無論如何， – 2015-01-24 11:50:04

沒有工作。必須在ember-view類中使用flex。 – 2015-01-24 14:23:06

只是爲了讓人們知道，這個解決方案爲我工作。對於Ember v1.11，我首先必須覆蓋默認的ember rootElement Ember.Application.create。然後將我的rootElement設置爲100％的寬度和高度。之後，上述解決方案立即工作。 – 2015-06-14 11:47:43

我最近遇到了這個問題，我花了一些時間來修復它，我只是想與你們分享我的解決方案。

「燼-CLI」：「2.13.1」
「引導」：「^ 4.0.0-alpha.6」

因此，作爲user510159寫道，問題在於這是餘燼視圖類被設置。

Scott將height: 100%;屬性添加到ember-view類的解決方案是解決方案的一半。

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

對於它在我的情況下工作，我必須爲我的HTML內div元素設置高度屬性。

<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%; 
}

我希望這有助於。

來源

2017-05-24 13:23:29

回答

相關問題