我的页面结构如下：
<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是一种选择，尽管我试图避免使用Javascript，因为到目前为止我还没有在此站点中真正使用过它。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句