將屏幕側面的元素延伸到屏幕底部嗎？

Question

我正在制作一個帶有角度的Web應用程序，並在每個頁面的側面附加了側邊欄視圖。 我正在使用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>

內容視圖堆疊在我的側邊欄旁邊。

問題是我的頁面之一包含一個動態擴展的組件，這增加了內容視圖的高度。 這會將較低的內容視圖（'content-2'）向下推到頁面下方，當它進入側邊欄視圖的底部下方時，它將在側邊欄下方向左滑動，而不是位於第一個內容視圖的右側。

我嘗試在側邊欄div中添加style="padding-bottom:500px"和style="vh:100" ，因為它向下擴展了該視圖，所以可以使用一點，但是我更喜歡一個不會不必要地將頁面擴展到當前所需范圍之外。 另外，一旦content-view2到達填充的底部，它仍然像以前一樣滑過。

---

更新：

我終於站起來了，所以希望這可以說明問題和我正在嘗試做的事情： http : //plnkr.co/edit/EbGJAqxdjHRCMjjC6waA

當用戶按下按鈕時，content.html視圖將動態增加/減少，以說明問題（請確保向下滾動以查看我在說什么）。

Answer 1

無需更改布局的最簡單的工作解決方案。 問題是第二個內容的float：left，所以讓我們在屏幕尺寸足夠大時將其更改為right- 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;
  }
}

一個更簡單的工作解決方案+ 插件 ：

從邊欄中刪除style="padding-bottom:100vh" -因為我們不再需要它。

更改您的html標記，以便將兩個內容區域都包裝在一個大的float中。 這樣，第二個內容就可以向左滑動。

指數：

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

以前的無效解決方案：

在沒有可用的插件/提琴手的情況下很難復制問題，但是我認為將側邊欄的高度設置為100vh或將padding設置為calc(100vh - height of sidebar)將解決您的問題。 1vh是視口高度的1％，即可用的瀏覽器顯示區域，因此使用vh進行設置將根據屏幕高度動態調整側邊欄或填充的大小。 注意事項-vh（和vw）僅受現代瀏覽器支持（請參見caniuse ）。