UI-Router：高度：身體元素上的100％忽略嵌套視圖高度

我正在構建一個經常使用嵌套視圖的角度應用程序。然而，某些視圖比頁面上的其他元素更高，並且最終延伸到父視圖的末尾。UI-Router：高度：身體元素上的100％忽略嵌套視圖高度

我使用Ryan Fait's Sticky Footer所以我身邊有一個包含分區設置一個包裝height:100%，我本來期望的頁面，只是適應和移動頁腳嵌套視圖的底部但是我看到樣式元素頁腳border和background-color保留在父div的末尾，而頁腳的內容被推到嵌套div的末尾。

包括像我和越來越精確的語言掙扎的圖像：

我真的尋找任何解決方案從固定的CSS的東西，看起來像hackier改變頁腳或使用NG-如果/ ng-class在某些頁面上。我在想象我誤解了CSS/UI-Router的一些東西，但我無法真正追蹤它。

代碼不是很有意思，但是這是它嗎？

CODE

.wrapper { 
 
    min-height: 100%; 
 
    margin-bottom: -50px; 
 
} 
 
.push { 
 
    height: 50px; 
 
} 
 
.footer { 
 
    display: block; 
 
    height: 50px; 
 
} 
 
.nested { 
 
    max-height: 500px; 
 
}

<body> 
 
    <div class="wrapper"> 
 
    <div> 
 
     <h1>Some text</h1> 
 
     <ui-view class="nested"></ui-view> 
 
    </div> 
 
    <div class="push"></div> 
 
    </div> 
 
    <footer class="footer"> 
 
    <span>some copy</span> 
 
    </footer> 
 
</body>

來源

2016-10-04 brokyo

創建一個演示，再現這一點。 CSS'flexbox'可以治癒所有這些 – charlietfl

這完全是一個CSS問題（或者理解其某些方面），並且與角度無關。這是設置一個固定的高度_does_。包裝的高度不受限制，因爲您只設置最小高度 - 但身體高度有限，因此延伸超過此高度的內容可以從身體元素流出，但不會_extend_其高度。去查看與視口相關的單位，特別是'vh' - 並將它們用於你的（最小）高度。它們不需要父元素上的固定高度來工作，而不像百分比高度。 – CBroe

道歉@CBroe，但我不確定我是否按照你的建議。您是否想要在上應用最小高度的視口單元，因爲這是我嘗試過的並且沒有奏效的內容......或者我完全誤讀了您的建議。 – brokyo

如果使用高度爲百分比值（即相對高度），則父元素的高度必須被太定義。在你的情況下，你還需要height: 100%身上和html，如

html, body { 
    height: 100%; 
}

來源

2016-10-05 00:36:35 Johannes

UI-Router：高度：身體元素上的100％忽略嵌套視圖高度

回答

相關問題