讓div和div div至少擴展瀏覽器窗口的全部高度

我需要在我的主體div的左側和右側延伸的圖像（實際上是爲了div下的一種下拉陰影效果）。讓div和div div至少擴展瀏覽器窗口的全部高度

這會很簡單，如果它不是因爲我想這個div是可擴展，並且我需要它在IE7和IE8中工作，並且我希望它至少延伸到底部這一頁。我嘗試使用polyfills來獲得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？

來源

2012-01-22 Sabrina Leggett

這是一個沒有簡單解決方案的常見問題。 CSS3將解決它，但支持舊版瀏覽器意味着它不會很快消失。

退房

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

，看看這點你在正確的方向。就我所知，你基本上需要僞造它（虛擬列）或使用javascript。

來源

2012-02-16 23:35:18

由於這是評分最高的Google命中，我只是想補充說「CSS3將解決它」的意思是http://stackoverflow.com/a/16837667/1463507 – kqr

我曾經使用過的一種便宜的解決方案是將頂部和底部的位置設置爲零。

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

來源

2012-01-22 22:51:48 Shredderroy

謝謝！這對於讓div適合屏幕來說是完美的，但如果我在文檔中向下滾動，div不會爲內容伸展（只要我滾動，它就會停下來）。我不知道我是否可以用位置做一些事情：固定（也許把內容放在單獨的div中，我會和它一起玩......） –

-1

我最終使用：

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

（我用它在文檔加載，對窗口大小調整，而當Ajax調用是由可能擴大頁）

我想我的新的規則將是，如果有東西花費我超過20分鐘才能找出獨自使用CSS我會去簡單的方式和使用javascript/jquery ...

來源

2012-01-23 11:42:48

你在你的問題中的嘗試表明你不太瞭解CSS，並陷入「使用jQuery「陷阱意味着你選擇放棄而不是學習它是如何工作的。 – Rob

指引我朝着正確的方向比批評我的知識更有用......我不知道關於CSS的所有內容，否則我不會在這裏問。 –

這可以純粹在CSS中解決。 – Dementic

你可能會更好我們一個背景圖像 - 例如http://jsfiddle.net/ZXpyT/。請注意，這假定正文內容寬度爲960像素;這個想法是創建一個圖像（垂直可重複），取代當前單獨的左/右圖像。

來源

2012-01-26 23:56:22 Conan

背景需要與主div一起擴大和縮小。主div有一個960像素的最小寬度和1280像素的最大寬度，我需要背景圖像以任意寬度將它邊框化，這就是爲什麼我需要它成爲兩個單獨的圖像。 –

可以指定多個背景，你的包裝DIV，而不是到2個的div，像這樣

.wrapper{ 
background: url('left.jpg'),url('right.jpg'); 
background-repeat: repeat-y, repeat-y; 
height:100%; 
}

對不起，我錯過了你想要支持的瀏覽器矩陣...好這裏goes..try此在所有瀏覽器對我來說..this工作

<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>

來源

2012-01-27 10:24:09 Abhidev

http://www.w3schools.com/css3/css3_backgrounds.asp多個背景在IE8和波紋管中不起作用。一直無法獲得PIE的工作，我不確定是否值得與之戰鬥或僅僅使用JS。 –

不錯的嘗試！ :)如果你把延伸超過瀏覽器窗口高度的文本不起作用。我告訴你......看起來很簡單，但不是太多！ –

另一種方式可能是......給位置：固定到左圖像div。你試過這個嗎？ – Abhidev

你爲什麼不給.left-imageheight:100%？某些瀏覽器要獲得100％的瀏覽器寬度/高度，則必須將每個包含的元素設置爲100％。

來源

2012-02-09 22:17:03

height: inherit;怎麼樣？它應該根據父標籤的高度。

來源

2012-02-10 13:39:50 Giannis

當內容至少是頁面的高度，但我需要div至少與瀏覽器窗口一樣高時，它才起作用。我認爲我讀到了某個地方的高度：當外部元素具有自動值並且最小高度被認爲是自動時，100％不起作用，這也可能是繼承的情況 –