Question

我的页面右侧有一个侧边栏DIV。侧边栏的CSS

  #sidebar {
    position: fixed;
    right: 0;
    top: 22px;
    border: 3px solid #73AD21;
    max-width: 300px;
    overflow:scroll;
  }

我目前正在阻止页面主体中的内容与使用javascript函数的侧边栏重叠

function handleResize() {
    var sbw = document.getElementById('sidebar').offsetWidth;
    var ww = document.documentElement.clientWidth || document.body.clientWidth;
    var bodyWidthVal = 1000;
    $("body").css('width', Math.min(bodyWidthVal,(-9 + ww - sbw)));
}

在检测窗口大小调整或缩放（后者通过鼠标滚轮事件捕获）时调用。神奇数字'-9'在某种程度上也是必要的，因为它似乎在我正在使用的Web浏览器（IE 11）和sidebar.offsetWidth没有捕获侧边栏周围边框的宽度

这是有效的，但如果可以在纯CSS中完成，我宁愿摆脱这种klugy解决方案。

Answer 1

您可以在CSS中应用计算，以便div不重叠。例如：

<div class="right-sidebar"></div>
<div class="main-body"></div>

CSS中的

：

.right-sidebar{
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
}
.main-body{
  width: calc(100% - 300px);
  height: 1000px;
}

如果您的侧边栏宽度是动态变化的，那么您可以在JS中获取宽度并在JS中相应地更改主体的宽度属性。

Answer 2

有一个更简单的解决方案（实际上有几个）根本不需要JavaScript。

只需浮动您的内容和侧边栏即可。

使用静态单位只会在特定视口上看起来很好。此外，在CSS中，width和height属性仅与内容区域的大小相关。填充，边框和边距是不同的尺寸。可以在CSS中覆盖此默认行为，方法是在任何要根据内容，填充和边框确定大小的元素上设置/* Change box model default sizing so that padding and borders are counted into the width of an element */ * { box-sizing:border-box; } #wrapper { width:100vw; /* as wide as the viewport */ } #mainContentArea { border:1px solid black; background-color:#e0e0e0; width:80%; float:left; /* align element to left of row allowing next element to float up */ height:100vh; } #sidebar { border:1px solid red; background-color:#808080; width:20%; float:left; /* float to left until another floated element is found */ height:100vh; min-width:100px; /* Don't let the sidebar get smaller than 100px */ }（仍然不包括边距）。

请参阅代码中的注释：

＆＃13;

<div id="wrapper">
  <div id="mainContentArea">
  
  </div>
  <div id="sidebar">
  
  </div>
</div>

＆＃13;

//Constructor
public KudanTracker(TrackerImplementation track) {
    _trackerPlugin = track;
}

＆＃13;

如何在纯CSS中执行此操作？

2 个答案: