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％忽略嵌套视图高度

回答

相关问题