Question

我的页面布局包含左侧固定侧边栏和右侧页面其余部分的主容器。在右边的容器内部，这是一个div我有2个元素

position:fixed

第二个div的内容很长，因此表示滚动。我想做的是让第一个div变粘。所以我在css中应用了<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>，但是它将它从右侧容器的上下文中取出，这意味着css类的响应宽度不再起作用。 2个div重叠。

我正在寻找一种干净的方法来处理这个问题。我想到的最好的就是使用像这样的虚拟div：

@echo off
for /f "delims=" %%a in ('wmic OS Get localdatetime  ^| find "."') do set     "dt=%%a"
set "YYYY=%dt:~0,4%"
set "MM=%dt:~4,2%"
set "DD=%dt:~6,2%"

set datestamp=%MM%-%DD%-%YYYY%

XCOPY J:\vch\vch_soh_*.csv P:\Stefan\ /S /D:%datestamp%

有了这个我想到了创建一个元素指令，它使用jquery将sticky-div的witdh设置为dummy-div的宽度。我仍然认为这不是一个非常好的解决方案，并且想知道是否有更清洁的方法？

Answer 1

首先不要复制Class你应该只有一个class=""并且里面有你的所有类。

除了创建虚拟div以补偿流量消除之外，您应该只给非固定<div>一个margin或padding来补偿fixed的丢失<div>。

您可以使用j查询来克隆容器的width并像您提到的那样进行注入。

另一个想法是使用动态宽度并将它们匹配到容器。

e.g。 50%与calc结合使用，我看不出为什么你无法达到所谓的固定<div>父母的确切宽度。

Answer 2

我最终选择的解决方案是保留虚拟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固定在布局垂直的小屏幕上。

修复了具有angularjs和bootstrap的reponsive div中的位置div

2 个答案: