Question

我正在制作一个有角度的网络应用程序，侧边栏视图附在每页的侧面。我使用twitter-bootstrap来处理页面上的网格/间距，使用ui-router来处理不同的视图。

我的观点如下：

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

内容视图在我的侧边栏旁边一个堆叠在另一个上面。

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

我已经尝试将style="padding-bottom:500px"和style="vh:100"添加到侧边栏div，因为它会将该视图向下延伸，但是我更喜欢没有＆＃的解决方案39;不必要地将页面扩展到当前所需的范围之外。此外，一旦content-view2到达填充的底部，它仍然像以前一样滑过。

更新

我终于得到了我的傻瓜，所以希望这将说明问题以及我想要做的事情：http://plnkr.co/edit/EbGJAqxdjHRCMjjC6waA

当用户按下按钮时，content.html视图会动态增加/减少，说明问题（请务必向下滚动以查看我正在谈论的内容）。

Answer 1

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

<div class="content2 col-md-10 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>

@media (min-width: 992px) {
  .content2 {
    float: right;
  }
}

更简单的工作解决方案+ plunker：

从侧边栏移除此内容 - style="padding-bottom:100vh" - 因为我们不再需要它了。

更改您的html标记，以便两个内容区域都包含在一个大浮点数中。这样，第二个内容可以向左滑动。

指数：

<div class="container">
  <div ui-view="sidebar"></div>
  <div class="col-md-10 container-fluid">
    <div ui-view="content"></div>
    <div ui-view="content-2"></div>
  </div>
</div>

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

内容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 - height of sidebar)将解决您的问题。 1vh是视口高度的1％ - 即可用的浏览器显示区域，因此使用vh设置它将根据屏幕高度动态调整侧边栏或填充的大小。注意事项 - vh（和vw）仅受现代浏览器支持（请参阅caniuse）。

将屏幕侧面的元素延伸到屏幕底部？

更新

1 个答案: