所以我正在制作一个布局非常有问题的网站。有四个 Angular 图像TL、TR、BL和BR用黑色 block 表示。深橙色区域是主要内容(宽度为 960px)，绿色箭头表示的外部区域是浏览器窗口。看图:
Diagram http://dotcafedesigns.com/stackoverflow/problem.gif
最上面的图片表示站点尽可能窄 - 如果它大于定义的区域，则不应允许比此 (960px) 更窄，则不应有滚动条。底部的两个图像代表浏览器的不同宽度。
左下角和右下角的黑色 block (图像)应始终位于屏幕的左下角和右下角，除非宽度降至 960px，在这种情况下，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 引导它是多么容易感到惊讶 - 只需检查浏览器调整宽度并在宽度低于 1120 像素时添加额外的 CSS。
关于html - 棘手的 CSS 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2397856/