Css 具有具有重新调整大小约束的固定DIV元素

我有一个网站与以下基本布局。基本上，我在固定位置有

NAV

div和

SIDEBAR

div。这是因为当用户在我的页面上向下滚动时，只有中间的

列

div会移动

我遇到的问题是，当窗口水平收缩时，侧边栏向左移动，最终与我的

中间列重叠

我将
body
设置为
minwidth
，但仅当侧边栏为
position:absolute
而非
position:fixed

有没有一种方法可以保持我的滚动方式，但是在某个像素限制之后，
侧栏
div停止向左移动

谢谢

编辑标记：

div.MASTER {
    position: inherit;
    width:100%;
    height:auto;
}

div.NAV {
    position:fixed;
    top:0;
    left:0;
    width:200px;
}

div.CONTENT {
    float: left;
    position: relative;
    width:100%;
}

div.MIDDLECOLUMN {
    float:left;
    width:100%;
    height:100%;
    text-align:center;
}

div.SIDEBAR {
    position:fixed;
    top: 0;
    right: 0;
    width:200px;
}

啊，我明白了。您需要在主容器上指定最小宽度。将“最小宽度”设置为元素断裂前的宽度

将等于导航栏宽度的左侧边距添加到内容分区。
您可以使用jquery中的滚动功能：

$(document).ready(function()
{
var $left= $('#yourdiv').offset().left + 20; //+20 is optional

$(window).scroll(function()
{   
 if ($(window).scrollLeft()>$left)   
        {
         $('#yourdiv').addClass('floater');
         $('#yourdiv').removeClass('floated')
        }
        else
        {
         $('#yourdiv').removeClass('floater');
         $('#yourdiv').addClass('floated')

         }
});
});

其中，浮动类为绝对位置，浮动类为固定位置

编辑1：

也许您可以在导航栏中使用所有百分比宽度，如：

.nav{width:20%; position:fixed;} 

.master{width:60%; position:absolute;margin-left:21%; }

你的标记看起来像什么？@Ray我为以下所有div添加了CSS标记。我的身体div有
最小宽度：900px
谢谢你的回答。我在标记上犯了一个错误，侧边栏有
位置：已修复
，更改最小宽度似乎不起作用。似乎当一个div有一个固定的位置时，它会忽略所有的最小宽度收缩痕迹，而这些痕迹似乎起到了作用！作为旁注，我将content div设置为
width:100%
，这样在调整浏览器大小时它可以水平居中。现在我有了那个边距，在两个像素宽度的块之间使用一个百分比宽度会让它运行起来很奇怪。我可以使用相对百分比，但根据分辨率，它看起来会有所不同，对吗？不管怎么说，你在使用断点吗？我建议使用最小/最大宽度设置每个容器的相对百分比宽度，并使用断点进行调整。另一种方法是使用jquery计算大小调整时的宽度，我没有使用断点，但设置最小宽度似乎可以做到这一点。非常感谢。谢谢你的回答。我确实尝试过，但问题是当侧边栏变成
位置：绝对时，它将与页面的其余部分一起滚动。