所以我正在制作一个布局非常有问题的网站。有四个角图像TL,TR,BL和BR由黑色块表示。深橙色区域是主要内容(宽度为960px),外部区域用绿色箭头表示为浏览器窗口。见图:
Diagram http://dotcafedesigns.com/stackoverflow/problem.gif
顶部图像代表最窄的网站 - 如果它大于定义的区域,则不应该允许它比这个(960px)更窄,不应该有滚动条。底部的两个图像代表浏览器的不同宽度。
左下和右下黑色块(图像)应始终位于屏幕的左下角和右下方,除非宽度降至960px,在这种情况下BL和BR图像应略微进入主区域。如果网站缩小到200px,则BR图像不应该在右上角戳。
此时我并不关心它在IE6中完全正常工作(我可以大致工作)但我甚至无法弄清楚如何在没有Javascript或非常实验性的CSS的情况下完全完成它。目前我正在使用绝对定位的div,这种工作方式,但不能正常工作。
我认为如果没有别的办法,我愿意接受一点JS,但我不愿意。
非常感谢!
答案 0 :(得分:17)
不需要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触摸引导它是多么容易 - 只需检查浏览器重新调整宽度,并在宽度低于1120px时添加额外的CSS。
答案 1 :(得分:2)
这样的东西?如果您愿意,可以使用类似的JQuery代码替换JavaScript代码,只是想了解这是如何工作的。
<html>
<head>
<title>....</title>
<style type="text/css">
html
{ height: 100%; margin: 0; background: white; }
body
{ height: 100%; width: 960px; margin: 0 auto; background: gray; overflow: hidden; }
#main
{ margin: 0px; padding: 5px 20px; position: relative; }
#headLeft
{ position: absolute; top: 0px; left: -80px;
width: 100px; height: 35px; background: green; }
#headRight
{ position: absolute; top: 0px; right: -80px;
width: 100px; height: 35px; background: green; }
#footLeft
{ position: absolute; bottom: 0px; left: 0px;
width: 100px; height: 35px; background: green; }
#footRight
{ position: absolute; bottom: 0px; right: 0px;
width: 100px; height: 35px; background: green; }
</style>
<script type="text/javascript">
function checkSize ( event )
{
var contentWidth = 960;
var minOuterBoxSize = 60; // maximum 100-60=40 px will be displayed inside the main area
if ( window.innerWidth - contentWidth < minOuterBoxSize * 2 )
{
var pos = ( ( minOuterBoxSize * 2 ) - window.innerWidth + contentWidth ) / 2;
document.getElementById( 'footLeft' ).style.left = '-' + pos;
document.getElementById( 'footRight' ).style.right = '-' + pos;
}
else
{
document.getElementById( 'footLeft' ).style.left = '0px';
document.getElementById( 'footRight' ).style.right = '0px';
}
}
</script>
</head>
<body onload="checkSize( event );" onresize="checkSize( event );">
<div id="main">
<div id="headLeft">TL</div>
<div id="headRight">TR</div>
<p>Normal content</p>
</div>
<div id="footLeft">BL</div>
<div id="footRight">BR</div>
</body>
</html>
答案 2 :(得分:1)
唯一真正棘手的部分是底部。其余部分非常简单:
<body>
<div id="container">
<div id="header">
<div class="right"></div>
<div class="left"></div>
</div>
<div id="footer">
<div class="right"></div>
<div class="left"></div>
</div>
</div>
</body>
CSS:
#container {
margin: 0 auto;
width: 960px;
}
#header {
position: relative;
}
#header .right, #header .left {
position: absolute;
width: 100px;
}
#header .right {
left: 940px; /* leaves 20px inside the #header */
background: url(images/header_right.gif) no-repeat;
}
#header .left {
left: -80px; /* leaves 20px inside the #header */
background: url(images/header_left.gif) no-repeat;
}
#footer
的一些类似内容,但您需要使用一点点javascript来检测窗口宽度并略微调整left
。