在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

回答

相关问题