Javascript 将屏幕侧面的元件延伸至屏幕底部？

我正在制作一个有角度的web应用程序，每个页面的侧面都有一个侧边栏视图。我使用twitter引导处理页面上的网格/间距，使用ui路由器处理不同的视图

我的观点如下：

index.html

<div ui-view="sidebar"></div>
<div ui-view="content"></div>
<div ui-view="content-2"></div>

我的侧边栏的标记如下所示：

sidebar.html

<div class="col-sm-3 sidebar">
  <!-- sidebar view content -->
</div>

以及“我的内容”视图的标记：

content.html和content-2.html

<div class="col-sm-9 container-fluid">
  <!-- content view content -->
</div>

内容视图一个叠在另一个上，紧挨着我的侧边栏

问题是我的一个页面包含了一个动态扩展的组件，它增加了内容视图的高度。这会将较低的内容视图（“content-2”）推到页面下方，当它位于侧边栏视图底部下方时，它会在侧边栏下方向左滑动，而不是停留在第一个内容视图下方的右侧

我已经尝试将

style=“padding-bottom:500px”

和

style=“vh:100”

添加到侧边栏div中，这会有一点效果，因为它会向下扩展视图，但我更喜欢一种不会不必要地将页面扩展到当前需要的范围之外的解决方案。此外，一旦content-view2到达填充的底部，它仍然会像以前一样滑动

---

更新： 我终于找到了我的扑克牌，希望这能说明问题和我要做的事情：

---

当用户按下按钮时，content.html视图将动态增加/减少，说明问题所在（请确保向下滚动查看我所说的内容）。

最简单的工作解决方案，无需更改布局。问题是浮动：第二个内容的左边，所以当屏幕大小足够大时，让我们将其更改为右边-：

内容1：

<div class="col-md-12 container-fluid" style="padding-bottom:20px">
  <!-- the padding on the following container is to simulate the added space 
  that appears once the div dynamically increases in size -->
  <div class="container-fluid" ng-style="vm.contentStyle">
    <h2>Content Frame One</h2>
    <button ng-click="vm.expand()" type="button" class="btn btn-default">{{ vm.change }} Size</button>
    <p ng-show="vm.info">{{ vm.info }}</p>
  </div>
</div>

内容框架一
{{vm.change}}Size
{{vm.info}

内容2：

<div class="col-md-12 container-fluid">
  <div class="container-fluid" style="background:#800000;color:white">
    <h2>Content Frame Two</h2>
    <p>Centered below Frame One at start, should still be centered after button press.</p>
  </div>
</div>

内容框架二
开始时居中于第一帧下方，按下按钮后仍应居中

以前的非工作解决方案：

如果没有一个工作的plunker/fiddler，要复制这个问题有点困难，但我认为将边栏的高度设置为100vh或将填充设置为

calc（100vh-边栏的高度）

将解决您的问题。 1vh是视图端口高度的1%——即可用的浏览器显示区域，因此使用vh设置它将根据屏幕高度动态调整边栏或填充的大小。

---

注意事项-vh（和vw）仅受现代浏览器支持（请参阅）。

现在实际来看，这似乎延长了我在再次滑动之前添加动态元素的距离：（不确定为什么会这样做，也许它只是在页面最初加载时计算视口高度？编辑：是的，我认为它是初始包含块高度的100%。因此，虽然这很好，因为它不会增加到初始边界之外，但它也不会动态更新。尝试填充底部：100vh。这在或者，它也有同样的问题，即在屏幕上添加不必要的空间。我已经更新了我的主要问题，添加了一个plunker，希望这可以帮助您或其他人！我已经编辑了plunker，将这里显示的解决方案+更改包括在内。欢迎，谢谢您-这是一个有趣的、知识丰富的挑战。

<div class="col-md-12 container-fluid" style="padding-bottom:20px">
  <!-- the padding on the following container is to simulate the added space 
  that appears once the div dynamically increases in size -->
  <div class="container-fluid" ng-style="vm.contentStyle">
    <h2>Content Frame One</h2>
    <button ng-click="vm.expand()" type="button" class="btn btn-default">{{ vm.change }} Size</button>
    <p ng-show="vm.info">{{ vm.info }}</p>
  </div>
</div>

<div class="col-md-12 container-fluid">
  <div class="container-fluid" style="background:#800000;color:white">
    <h2>Content Frame Two</h2>
    <p>Centered below Frame One at start, should still be centered after button press.</p>
  </div>
</div>