两个固定的 div - 左右答案

【问题标题】：Two fixed divs - right and left两个固定的 div - 左右
【发布时间】：2012-07-09 23:31:48
【问题描述】：

我想在我的网页上创建两个固定的 div。第一个应该在左边，第二个在右边。我创建了一些代码，但它并不完美。

演示here

我不知道如何纠正它。有什么解决办法吗？

【问题讨论】：

【解决方案1】：

通过向#main 提供等于固定列宽度的margin，它可以防止该区域向左折回。当您将position:fixed 应用于列时，它会将这些元素从文档流中移除。

由于position:fixed 被动态应用于列（通过使用JS），如果仅用于计时目的，您也可以考虑将margin 动态应用于#main。

【讨论】：

【解决方案2】：

当页面滚动时，您通过应用 fixed 和 fixed2 类为 #aside 和 #bside 元素设置 position:fixed。

由于position:fixed 应用于#aside 和#bside 时，将它们从文档流中取出，所以元素#main 按预期向左浮动。

为避免更改您当前的代码，一个简单的解决方案是使用一个类为您的#main 元素设置某些样式，并根据需要应用该类：

请参阅此working Fiddle 示例。

CSS

.fixMiddle {
    position: relative;
    left: 190px;         /* your #aside width+padding+border */
}

jQuery

if ($('#aside').hasClass('fixed')) {
  $('#main').addClass('fixMiddle');
} else {
  $('#main').removeClass('fixMiddle');
}

【讨论】：