製作一個佔瀏覽器高度100％的DIV，除非內容比瀏覽器高？

我試圖創建具有一個頁面：製作一個佔瀏覽器高度100％的DIV，除非內容比瀏覽器高？

標準的背景圖像上的BODY標籤設置
父DIV的寬度和100％的高度，有一個透明的PNG作爲背景圖。
一個可能包含不同數量文本的子DIV。

因此，該結構將是這樣的：

CSS：

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0 0; 
    padding: 0 0; 
} 
body { 
    background-image: url('bgimage1.jpg'); 
} 
#parentDiv { 
    width: 100%; 
    min-width: 960px; 
    height: 100%; 
    background-image: url('contentDiv_dropshadow.png'); 
    background-position: center top; 
    background-repeat: repeat-y; 
} 
#contentDiv { 
    width: 800px; 
    margin: 0 auto; 
    background-color: #DADADA; 
}

HTML：

<body> 
    <div id="parentDiv"> 
     <div id="contentDiv"> 
      <p>Paragraphs of text...</p> 
     </div> 
    </div> 
</body>

基本上，#contentDiv包含文本項，＃ parentDiv包含一個透明的PNG陰影圖像e（因此contentDiv有幻影），我希望#contentDiv和#parentDiv都能一直運行到瀏覽器的底部。

我遇到的問題是，如果我給#parentDiv 100％的高度，然後使瀏覽器窗口小於#contentDiv中的內容，窗口將獲得一個滾動條來查看剩餘內容並，當我向下滾動時，#parentDiv不會超過初始瀏覽器高度。

將＃parentDiv的高度設置爲'auto'會導致dropshadow圖像重複到＃contentDiv內容的末尾，但是如果#contentDiv沒有填充瀏覽器的全部高度，那麼#parentDiv和#contentDiv都會突然結束文本結束的地方。

如果沒有足夠的內容將DIV推到底部（比如高度：100％），但是也超出了瀏覽器的範圍，是否存在非Javascript解決方案以使這兩個DIV都達到瀏覽器的整個高度如果內容運行時間較長，那麼高度？

來源

2011-08-18 savax0

您可以使用表格。 –

您可以使用overflow: auto;來滾動其中一個div元素並將其保持爲100％。不完全是你要求的，但我認爲它會給你所要求的行爲。請注意，如果您在不是100％的div上執行此操作，那麼滾動條將只是div的大小而不是整個瀏覽器窗口大小，這看起來像您想要的，所以我會將它放在#parentDiv上。編輯：我一直在移動設備上測試我的網頁（iPod touch，iPhone和iPad;我還沒有測試Android或其他平臺）和可滾動的div不能在這些設備上工作。

來源

2011-08-18 22:21:28 toby

我想是這樣的...只是檢查

<html> 
    <head> 
    <style type="text/css"> 

body { 
    background-image: url('bgimage1.jpg'); 
} 
#wrapper 
{ 
    position:absolute; 
    top:0px; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    margin:0px; 
} 
#parentDiv { 
    width: 100%; 
    min-width: 960px; 
    min-height:100%; 
    background-image: url('contentDiv_dropshadow.png'); 
    background-position: center top; 
    background-repeat: repeat-y; 
    border:solid 1px red; 
    position:absolute; 
    text-align:center; 
    top:0px; 
    bottom:0px; 
} 
#contentDiv { 
    width: 800px; 
    margin: 0 auto; 
    background-color: #DADADA; 
    border:solid 1px blue; 
    position:absolute; 
    text-align:center; 
    left:100px; 
    top:100px; 
    float:left; 
} 
</style> 
</head> 

<body> 
<div id=wrapper> 
    <div id="parentDiv"> 
     <div id="contentDiv"> 

      <p>Paragraphs of text...</p> 
         <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>   <p>Paragraphs of text...</p>  
     </div> 
       <div style="clear:both;" ></div> 
    </div> 
    <div style="clear:both;" ></div> 
    </div> 
</body>

來源

2011-08-19 07:08:23

，我發現你的代碼與3個警告工作得很好：

<!DOCTYPE html> < - 在行爲上很大的區別與未申報
#parentDiv，#contentDiv {...身高：100％...}
FireFox

來源

2011-08-19 07:18:35 Dawson

製作一個佔瀏覽器高度100％的DIV，除非內容比瀏覽器高？

回答

相關問題