所以我正在制作一个布局相当有问题的网站。有黑色块表示的四个角图像TL，TR，BL和BR。深橙色区域是主要内容(宽度为960像素)，外部区域由绿色箭头表示为浏览器窗口。见图：
Diagram http://dotcafedesigns.com/stackoverflow/problem.gif
顶部的图像代表站点尽可能狭窄 – 如果它比定义的区域大，应该不应该没有滚动条，它不应该被允许比这窄(960px)窄。底部的两个图像代表浏览器的不同宽度。
底部左右黑色块(图像)应始终位于屏幕的左下角，除非宽度降至960像素，否则BL和BR图像应略微进入主区域。如果网站缩小到200像素，则BR图片不应该仍然在右边。
在这一点上，我并不关心它在IE6中正常工作(我可以大致工作)，但是我甚至无法弄清楚如何完全没有Javascript或非常实验的CSS。目前我正在使用绝对定位的div的工作，但不正确。
我想我会愿意接受一些JS，如果没有其他方式，但我宁愿不。
回答非常感谢！
解决方法
不需要Javascript。至少在大多数现代浏览器中。使用简单的定位和一个@media查询我把它关掉了：
<head>
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: orange;
text-align: center;
color: black;
overflow-x: hidden;
}
#content {
width: 960px;
margin: 0 auto;
padding: 20px 0;
min-height: 800px;
background: #cc6600;
z-index: 0;
}
.image {
background: black;
color: white;
height: 60px;
width: 100px;
padding: 20px 0;
z-index: 1;
opacity: .95;
}
#top {
width: 960px;
margin: 0 auto;
position: relative;
overflow: visible;
}
#top .image {
position: absolute;
}
#top .left {
left: -80px;
}
#top .right {
right: -80px;
}
#bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
}
#bottom .image {
position: absolute;
}
#bottom .left {
left: 0;
}
#bottom .right {
right: 0;
}
@media all and (max-width:1120px) {
#container {
width: 960px;
margin: 0 auto;
position: relative;
overflow: visible;
}
#bottom .left {
left: -80px;
}
#bottom .right {
right: -80px;
}
}
</style>
</head>
<body>
<div id="top">
<div class="left image">left image</div>
<div class="right image">right image</div>
</div>
<div id="content">
content
</div>
<div id="bottom">
<div id="container">
<div class="left image">left image</div>
<div class="right image">right image</div>
</div>
</div>
</body>
这可能属于您对“极度实验性CSS”的描述，但我认为您会感到惊讶，它有多少支持，以及使用JS轻松引导的简单方法 – 只需检查浏览器宽度即可-size并添加额外的CSS，当宽度在1120px以下。
