我需要在我的主体div的左侧和右侧延伸图像(实际上是在div下面的一种阴影效果)。
如果不是因为我希望这个div能够可扩展,而且我需要它在IE7和IE8中工作,我会希望它扩展到至少在页面底部。
我尝试使用polyfill来获得CSS3魔法,但他们也没有工作(我试过PIE和一些没有运气的过滤器)。
我觉得我已经尝试了一切......这让我来到这里!这是我通过CSS / html获得的,我觉得我应该能够让它工作,但到目前为止还没有雪茄:
<div class="left-image">
<div class="right-image">
main body text
</div>
</div>
使用以下css:
html,body{
height: 100%
}
.left-image{
background: transparent url('image/url.png') repeat-y top left;
min-height: 100%; /*this alone works for making outer div extend browser & content height*/
min-width: 960px;
max-width: 1280px;
margin: 0 auto;
}
.right-image{
background: transparent url('image/url.png') repeat-y top left;
height: 100%; /*this only makes the div the height of its content*/
}
这导致.left-image div填充浏览器窗口的高度或内容的高度(以较大者为准),但.right-image div仅适合内容的高度(因此,如果内容小于浏览器窗口,它不会填充它)。
有什么方法吗?只需使用jQuery?
答案 0 :(得分:2)
这是一个常见问题,没有简单的解决方案。 CSS3将解决它,但支持旧浏览器意味着它不会很快消失。
结帐
http://www.alistapart.com/articles/fauxcolumns/
看看这是否指向正确的方向。你基本上需要伪造它(虚假列)或者据我所知使用javascript。
答案 1 :(得分:1)
我过去使用的一个便宜的解决方案是将顶部和底部位置设置为零。
.left-image{
background: transparent url('image/url.png') repeat-y top left;
/*min-height: 100%;*/
position: absolute;
top: 0px;
bottom: 0px;
min-width: 960px;
max-width: 1280px;
margin: 0 auto;
}
.right-image{
background: transparent url('image/url.png') repeat-y top left;
/*height: 100%;*/
position: absolute;
top: 0px;
bottom: 0px;
}
答案 2 :(得分:1)
使用背景图片可能会更好 - 有关示例,请参阅http://jsfiddle.net/ZXpyT/。请注意,这假设身体内容宽度为960px;我们的想法是创建一个图像(垂直可重复),替换当前单独的左/右图像。
答案 3 :(得分:1)
你可以为你的包装div指定多个背景而不是2个div,比如这个
.wrapper{
background: url('left.jpg'),url('right.jpg');
background-repeat: repeat-y, repeat-y;
height:100%;
}
抱歉,我错过了你想要支持的浏览器矩阵......好吧,这就是..这就是..这适用于所有浏览器
<html>
<head>
<title></title>
<style type="text/css">
.left-image{
background:grey;
min-height:100%;
height:100%;
width:100%;
position:absolute;
}
.right-image{
background:#eee;
min-height:100%;
height:100%;
width:50%;
margin:0 auto;
}
</style>
</head>
<body>
<div class="left-image">
<div class="right-image">
main body text
</div>
</div>
</body>
</html>
答案 4 :(得分:1)
为什么不给.left-image
height:100%
?有些浏览器要获得100%的浏览器宽度/高度,你必须将每个包含元素设置为100%。
答案 5 :(得分:1)
height: inherit;
怎么样?它应该采用父标记的高度。
答案 6 :(得分:0)
你在左图上使用min-height
,为什么不在右图上呢?
答案 7 :(得分:-1)
我最终使用了:
$(".left-image, .right-image").height($(document).height());
(我在文档加载时使用它,在窗口调整大小时,以及在进行可能扩展页面的ajax调用时)
我认为我的新规则是,如果我需要花费超过20分钟才能找到单独使用css的话,我将采用简单的方法并使用javascript / jquery ......
答案 8 :(得分:-1)
有一个非常简单的解决方法。将其添加到您的css display:block;