随着屏幕分辨率/窗口大小的减小，固定图像和内容与固定侧边栏重叠答案

【问题标题】：Fixed image and content overlaps fixed sidebar as screen resolution/window size decreases随着屏幕分辨率/窗口大小的减小，固定图像和内容与固定侧边栏重叠
【发布时间】：2014-08-01 13:39:47
【问题描述】：

我有一个结构如下的页面：

<body>
<div id="page">
    <div id="header-container">
        <header>
        </header>
    </div>

    <div id="main-container">
        <div id="main" class="site-main">
            <div id="sidebar-container">
                <div id="sidebar">
                </div>
            </div>

            <div id="content-container">
                <div id="main-banner-container">
                    <div id="main-banner-holder">
                        <img id="main-banner" src="http://dummyimage.com/900x300/000/fff" />
                    </div>
                </div>
                <div id="content" class="content" role="main">
                </div>
            </div>
        </div>
        <div id="footer-container">
            <footer>
                <div id="footer-images">
                </div>
            </footer>
        </div>
    </div>
</div>  
</body>

并使用以下 CSS 进行格式化：

body {
    margin: 0 auto;
    width: 70%;
    background-color: rgb(0,114,187);
    font-family: verdana;
}

#header-container {
    padding-bottom: 15px;
    padding-top: 20px;
    padding-left: 35px;
    padding-right: 35px;
    height: 190px;
}

header {
    position: fixed;
    width: 66%;
    padding-top: 30px;
    top: 0px;
}

#sidebar-container {
    height:500px;
    width:320px;
    float:right;
}

#sidebar {
    position: fixed;
    color: rgb(211,34,52);
    padding: 10px;
    right: 16.5%;
    top:226px;
}

#content-container {
    width: 72%;
}

#main-banner-container {
    max-width: 900px;
}

在宽屏上查看页面可以很好地显示内容。但是，当我减小窗口大小时，或者如果我在较低分辨率的屏幕上查看站点，固定图像和它下面的文本开始遮盖侧边栏，即使它确实缩放了一点。此外，当页面滚动时，即使某些文本移动为侧边栏腾出空间，滚动时其下方的文本也会重叠。

这个问题的粗略例子可以在这里看到：http://jsfiddle.net/4WQzP/

我需要做哪些改变？

编辑：澄清一下，我希望有一个基于 CSS/HTML 的简单修复。 Javascript 是一种选择，虽然我试图避免它，因为到目前为止我还没有在这个网站上真正使用过它。

【问题讨论】：

标签： html css formatting

【解决方案1】：

对于使用自适应设计有两种方式）），第一种是使用bootstrap框架，第二种是写media queries

【讨论】：

该站点是一个 Wordpress 站点，所以我不认为 bootstrap 是一个真正的选择。我真的在寻找一个直接的 CSS/HTML 修复。我不认为一个相对较小的重叠问题需要一套单独的特殊情况规则？我想它会起作用，但肯定有更清洁的解决方案吗？
最后，我决定使用媒体查询。那好吧！还是谢谢！