HTML/CSS固定定位导致重叠的div

Question

我正在尝试创建具有固定定位的2个侧边框(左侧和右侧),以及内容的居中容器.

问题是当最小化屏幕时,2个横幅覆盖中心容器.我需要一个CSS解决方案来将视图的最小宽度设置为860px; 之后,窗口变为可滚动且div不重叠.完美的解决方案是:

我正在使用的HTML是这样的:

<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>

<div class="center" style="margin:100px 180px 0 180px;">
        <div style="width:100%;">
                        <div style="width:500px; margin:0 auto;">
                        </div>
            </div>
</div>

<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>

上面的代码可以防止左栏与中心容器重叠; 但问题仍然存在于正确的栏中.

这是代码的小提琴:预览

Answer 1

您需要将三个 DIV 包装在一个包装 DIV 中，并设置min-width防止重叠。这可以防止它变得比三列窄。将宽度相加，将其设置为最小值。