Question

我需要在我的主体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？

Answer 1

这是一个常见问题，没有简单的解决方案。 CSS3将解决它，但支持旧浏览器意味着它不会很快消失。

结帐

http://www.alistapart.com/articles/fauxcolumns/

看看这是否指向正确的方向。你基本上需要伪造它（虚假列）或者据我所知使用javascript。

Answer 2

我过去使用的一个便宜的解决方案是将顶部和底部位置设置为零。

.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;
}

Answer 3

使用背景图片可能会更好 - 有关示例，请参阅http://jsfiddle.net/ZXpyT/。请注意，这假设身体内容宽度为960px;我们的想法是创建一个图像（垂直可重复），替换当前单独的左/右图像。

Answer 4

你可以为你的包装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>

Answer 5

为什么不给.left-image height:100%？有些浏览器要获得100％的浏览器宽度/高度，你必须将每个包含元素设置为100％。

Answer 6

height: inherit;怎么样？它应该采用父标记的高度。

Answer 7

你在左图上使用min-height，为什么不在右图上呢？

Answer 8

我最终使用了：

$(".left-image, .right-image").height($(document).height());

（我在文档加载时使用它，在窗口调整大小时，以及在进行可能扩展页面的ajax调用时）

我认为我的新规则是，如果我需要花费超过20分钟才能找到单独使用css的话，我将采用简单的方法并使用javascript / jquery ......

Answer 9

有一个非常简单的解决方法。将其添加到您的css display：block;

使div和子div至少延伸到浏览器窗口的整个高度

9 个答案: