根据angularJS中的外部div更改div的高度答案

【问题标题】：Change height of a div according to outer div in angularJS根据angularJS中的外部div更改div的高度
【发布时间】：2013-07-19 21:04:50
【问题描述】：

我有一个高度灵活的 div，里面有两个 div。第一个具有 60px 的固定高度，第二个高度应包含外部 div 内的所有其他左侧区域。我需要 angularJS 答案，而不是 JavaScript 本身或 JQuery

我查看了表单，只写了外部 div 是浏览器窗口的情况。我也尝试自己编写指令，但没有解决方案。

不胜感激任何答案或建议。

html代码

<div ng-app = "myApp" id = "outer" ng-style = "styleOuter()">
   <div id = "first" style = "height: 60px">first content</div>
   <div id = "second" ng-style = "style()">second content</div>
</div>

Outer div：angularJS 目录中的styleOuter() 函数将outer div 的高度设置为“windowSize-100px "

第一个div：它的高度是固定的（60px）

Second div：angularJS 目录中的style() 函数应将second div 高度设置为“outerDivSize - 60px"

【问题讨论】：

这是 CSS 问题，与 Angular JS 无关。您可以通过绝对定位元素来做到这一点。
您不能使用百分比，因为有两个 div，第一个是固定的，第二个是灵活的。如果您尝试将百分比大小设置为第二个 div，则会出现问题。当外部 div 的大小改变时，第二个 div 会根据外部 div 改变，第一个不会。我不能使用绝对定位，因为外部 div 会根据窗口大小而变化
这就是你所追求的吗？ jsfiddle.net/Bg8Us
外部 div 的绝对位置未知。也许它的顶部是 30px，也许是 60px 或 200px。因此，我不能使用绝对定位的 div。内部 div 的高度和位置只能根据外部 div 的高度和位置来设置。

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

我发布this solution 作为答案。这是我之前在评论中发布的 Fiddle 的第二个版本。

我很抱歉@pixelll，但我几乎可以肯定你想多了。如果您知道外部div (windowSize-100px) 和固定div (height: 60px) 的大小，那么您唯一需要为内部div 做的就是将其父级的CSS 位置设置为anything（这个，创建新的定位上下文），在这个新的上下文中，你应该绝对用bottom: 0定位内部div。我想就是这样。

【讨论】：

是的，我就是这样做的。我试图将“100px”设置为“Xpx”。如果是 X 会更好，但似乎很难做到，至少对于新手（我）来说。非常感谢，你很有帮助。

【解决方案2】：

你能提供一个 jsfiddle 来解释这个问题吗？我很难理解你的问题，似乎是一个 css 问题，但如果你提供一个例子，我会找到一个有效的解决方案。

【讨论】：

好的，好多了，但是我认为@LukaszBackman 找到了正确的，并且据我所知，“唯一”解决了您的问题。这只是一个 css 问题...