在angularjs和引導程序的響應div內的固定位置div

我有一個頁面佈局，涉及左側的固定邊欄和右側頁面的其餘部分的主要容器。內部的右側容器，其是一個div我有2個元件在angularjs和引導程序的響應div內的固定位置div

<div class="col-sm-12 col-md-5 col-lg-3"> 
    <custom directive> 
</div> 

<div class="col-sm-12 col-md-7 col-lg-9"> 
    <another custom directive> 
</div>

第二格的內容長，所以滾動是隱含的。我想要做的是使第一個div粘。所以我在css中應用了position:fixed，但是它將它從右側容器的上下文中取出，這意味着css類響應寬度不再起作用。 2個div也重疊。

我正在尋找一個乾淨的方式來處理這個問題。我認爲最好的是使用虛擬DIV像這樣：

<div class="col-sm-12 col-md-5 col-lg-3 dummy-div"> 

</div> 

<div class="col-sm-12 col-md-5 col-lg-3 sticky-div"> 
    <custom directive> 
</div> 

<div class="col-sm-12 col-md-7 col-lg-9"> 
    <another custom directive> 
</div>

有了這個，我想創建一個使用jQuery來粘div的witdh設置給啞-DIV的寬度的元素指令。我仍然認爲這不是一個很好的解決方案，但想知道是否有更清晰的方法？

來源

2015-05-20 Darian Rusu

首先不要重複班級，你應該只有一個class=""與你所有的班級'在裏面。

而是創建一個虛擬的DIV從流去除補償的，你應該放棄非固定<div>一個margin或padding以補償的fixed<div>損失。

您可以使用j查詢來剋制容器的width並像您提到的注入。

另一個想法是使用動態寬度並將它們匹配到容器。

例如50%夫婦，與calc，我沒有看到任何原因，你不能達到固定<div>所謂的父母的確切寬度。

來源

2015-05-20 09:10:31 DCdaz

你說得對，我已經編輯了我的代碼。我最終使用媒體查詢並按照您所說的使用動態寬度。對我來說重要的是，取決於屏幕尺寸固定的位置div將不得不參與屏幕的不同百分比 –

很高興它幫助了隊友 – DCdaz

我最終的解決方案是保留虛擬div，然後通過媒體查詢計算固定div的寬度。

@media only screen and (max-width : 1200px) { 
    position: fixed; 
    width: 30%; 
    margin-left: 1.3em; 
    } 
    @media only screen and (max-width : 992px) { 
    position: relative; 
    width: 95% ; 
    margin-right: 1.3em; 
    }

我還需要div不能固定在佈局垂直的小屏幕上。

來源

2015-05-21 07:30:22

在angularjs和引導程序的響應div內的固定位置div

回答

相關問題