HTML/CSS：創建一個總是填充整個頁面的div ...然後在其中有一個可調整大小的div？

我覺得這是一個簡單的問題，但無論出於什麼原因，我今天都無法弄清楚。HTML/CSS：創建一個總是填充整個頁面的div ...然後在其中有一個可調整大小的div？

我需要一個總是填充整個頁面的div，不管頁面有多大。然後我需要另一個div，我可以使用javascript重新調整大小（mydiv.style.width = x; mydiv.style.height = y;）。

如果第二個div的大小比現有的瀏覽器窗口高度高，第一個div應該調整大小以適應。

即如果第一個div的背景顏色是紅色，我應該從來沒有看到任何白色背景顏色，因爲第一個div總是擴展到整個頁面的大小。

我想這一點，這是行不通的，因爲紅色背景不會擴展到整個頁面的大小：

example of the problem

來源

2009-12-11 Keith Palmer Jr.

什麼是你最終要達到什麼目的？只要'scroll_layer' div在流中（例如，沒有浮動和靜態/相對定位），將'scroll_layer'放在'flashlayer'內將使得'flashlayer'隨它展開。 –

我不斷收到由CSS純粹主義者爲這荒涼的，但我最近通過使用表格解決了這個問題。

你需要一個外部的div，設置爲「position：relative」和100％高度，然後你在裏面放一個表格，每個方向也是100％。

歡迎你看不上眼表的解決方案。但是，我無法幫助你。

來源

2009-12-11 21:34:08

這樣的事情呢？

if (wholePageDiv.style.height < myDiv.style.height) { 
    wholePageDiv.style.height = myDiv.style.height + 10 
}

另一種方法 - 如果該背景div只需要一種顏色 - 就是將身體的背景顏色設置爲任何你需要的。那麼你不需要擔心任何JavaScript調整背景的大小。

來源

2009-12-11 21:34:35

這不會工作，除非當頁面第一次加載時，我也用JavaScript修改整個頁面div，然後每當其他東西改變大小時...這有點令人討厭，我寧願不必這樣做。 –

我認爲Zack的替代方案是最好的答案：body元素是一個總是填充整個「頁面」的塊級元素。您可以使用JavaScript和CSS將其綁定，就像使用div一樣。將您的body元素着色爲紅色，如果您的內部div被調整大小，則永遠不會看到白色。如果您不希望將CSS應用於網站中的每個頁面，請將類或ID添加到要影響的頁面主體中，然後編寫CSS以僅選擇具有特定類或ID的主體元素。

我是否錯過了使用body元素未解決的要求？

來源

2009-12-11 21:58:13 Val

神聖的廢物解決了它，一個完全中心的DIV，享受。

編輯：未成年人整容修復

的index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
<title>Universal vertical center with CSS</title> 

<style> 
body {text-align: center;} 
p {width: 300px;} 
.greenBorder {border: 1px solid green;} 
.wrapperA { display: table; width: 1px; height: 1px; margin: 0 auto;} 
.wrapperB { display: table-cell; #position: absolute; #top: 50%; vertical-align: middle;} 
.wrapperC { #position: relative; #top: -50%;} 
</style> 

<script language="JavaScript" type="text/javascript"> 
function resize(id) { 
var block = document.getElementById(id); 
var htmlheight = document.body.parentNode.scrollHeight; 
if (htmlheight > window.innerHeight) {htmlheight = window.innerHeight;} 
block.style.height = htmlheight + "px";} 
</script> 

</head> 

<body onload="resize('wrapper')" onresize="resize('wrapper')"> 
<div class="wrapperA greenBorder" id="wrapper"> 
<div class="wrapperB greenBorder"> 
<div class="wrapperC greenBorder"> 

<p>CENTERED CONTENT</p> 

</div> 
</div> 
</div> 
</body> 
</html>

來源

2009-12-14 10:06:43 Neros

IE6進入無限循環並使用該大小調整代碼凍結瀏覽器。 – YOU

這個問題並沒有說需要與IE6兼容，我個人認爲編碼人員應該開始強制人們只通過編碼來更新標準，這樣做會更容易。但是，嘿，這只是我不知道如何在IE6中做的藉口。對於其他人，它的工作原理。 – Neros

HTML/CSS：創建一個總是填充整個頁面的div ...然後在其中有一個可調整大小的div？

回答

相關問題