使 div 和子 div 至少扩展浏览器窗口的整个高度答案

【问题标题】：Make div and child div extend at least the full height of browser window使 div 和子 div 至少扩展浏览器窗口的整个高度
【发布时间】：2012-02-16 10:09:59
【问题描述】：

我需要让图像沿着主体 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？

【问题讨论】：

标签： jquery html css fluid-layout

【解决方案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;
}

【讨论】：

谢谢！这在使 div 适合屏幕方面非常有效，但是如果我在文档中向下滚动，则 div 不会针对内容进行拉伸（只要我滚动它就会停止）。我想知道我是否可以对 position: fixed 做一些事情（也许将内容放在单独的 div 中？我会玩它...）

【解决方案2】：

我最终使用了：

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

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

我认为我的新规则是，如果仅使用 css 需要我超过 20 分钟才能弄清楚，我将采用简单的方式并使用 javascript/jquery...

【讨论】：

您在问题中的尝试表明您不太了解 CSS，陷入“使用 jQuery”的陷阱意味着您选择放弃而不是学习它的工作原理。
引导我走向正确的方向比批评我的知识更有用...我对 CSS 不是一无所知，否则我不会在这里问。
那么请提供答案。可能有一种我没有看到的替代方法，但我目前正在尝试的方法肯定行不通。请记住背景图像边框必须是可扩展的 div。如果没有 JS 或 PIE 或其他启用 CSS3 的东西，我看不出有任何方式会发生这种情况。另外，如果我们没有找到解决方案，请标记出来！有些事情不能单独用 CSS 完成，我认为我们应该意识到这是否真的是一件事情，这样人们就不会在上面浪费时间！！！
不同意对这个答案投反对票。如果需要支持较旧的浏览器并且与某些 css 解决方案相比更直接，那么这是一个很好的答案。当然这可能不解决窗口大小调整...

【解决方案3】：

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

【讨论】：

背景需要随主div一起扩大缩小。主 div 的最小宽度为 960 像素，最大宽度为 1280 像素，我需要背景图像以任何宽度对其进行边框，这就是为什么我需要它是两个单独的图像。

【解决方案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>

【讨论】：

w3schools.com/css3/css3_backgrounds.asp 多个背景在 IE8 和下面不起作用。无法让 PIE 工作，我不确定是否值得与之抗争或仅使用 JS。
不错的尝试！ :) 如果您放置的文本超出浏览器窗口的高度，则它不起作用。我告诉你……看起来很简单，但没那么容易！
另一种方式可能是...给出位置：固定到左图像 div。你试过吗？

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：

这适用于内容至少是页面高度但我需要 div 至少与浏览器窗口一样高的情况。我想我在某处读到了这个高度：当外部元素具有自动值并且 min-height 被认为是自动时，100% 不起作用，这可能也是继承的情况

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

看看

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

看看这是否为您指明了正确的方向。据我所知，您基本上需要伪造它（假列）或使用 javascript。

【讨论】：

由于这是 Google 上的最高评价，我只想补充一点，“CSS3 将解决它”的意思是 stackoverflow.com/a/16837667/1463507

【解决方案9】：

有一个非常简单的解决方法。将此添加到您的 css 显示中：bock;

【讨论】：