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

时间:2012-01-22 22:14:44

标签: jquery html css fluid-layout

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

9 个答案:

答案 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;