如何創建一個可以調整窗口大小的div？

我想創建一個div使用css，調整窗口的大小。如何創建一個可以調整窗口大小的div？

Example: 
    #container 
    { 
     margin: 3em; 
    } 
    #header { 
    height: 100px; 
    } 
    #main { 

    } 
    #footer { 
    height: 100px; 
    bottom: 0px; 
    } 

    container 
     header 
     main 
     footer

所以，當我調整窗口的大小，我想main對窗口進行調整，同時header和footer staty 100像素;

有沒有辦法做到這一點使用CSS或我將不得不使用JavaScript？

來源

2010-10-15 Mark K

如果你把它設爲'％'，它將隨窗口大小調整，或者它是'auto'。否則是的，你必須鉤入resize事件並相應地進行調整。 – Rudu 2010-10-15 20:21:43

屏幕分辨率更改時，resize事件不會觸發。我知道這只是發生這種情況的一小部分實例...但如果它從未發生過，我不會提出它。你一直在告訴自己「他們爲我的工作付出了代價」：P – 2010-10-15 20:45:08

使用JavaScript，您可以在頁面加載時更改您的div。看到這篇文章的詳細信息：

dynamically resizing divs

來源

2010-10-15 20:19:58

我做過類似，但使用JavaScript來做到這一點對我來說也是如此。這不是最優雅的JS，但它的工作原理。當我有一個需要最大尺寸的div時，我使用了它，並且它有一個側邊欄，頂部和底部的條等。因此，當瀏覽器窗口調整大小時，我不得不快速調整容器div（這是一張地圖）。

您希望您的標記看起來像（我想你有這樣的話）：

<div id="container"> 
<div id="title">Title</div> 
<div id="main"></div> 
<div id="footer></div> 
</div>

腳本：

var browserWidth = 0; 
var browserHeight = 0; 

function getSize() { 
    if(typeof(window.innerWidth) == 'number') 
    { 
    //Non-IE 
    isIE = false; 
    browserWidth = window.innerWidth; 
    browserHeight = window.innerHeight; 
    } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
    //IE 6+ in 'standards compliant mode' 
    browserWidth = document.documentElement.clientWidth; 
    browserHeight = document.documentElement.clientHeight; 
    } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { 

    //They're not running IE7/FireFox2. Older browser. Find some technology 
    //to destroy their computer so they're forced to upgrade. 
    browserWidth = document.body.clientWidth; 
    browserHeight = document.body.clientHeight; 
    } 
} 

function updateMapSize() { 
    //IE7 is 21 pixels LESS than FireFox. 
    //Pretty much we want to keep the map to the maximum size alloted. 
    getSize(); 
    //top section 
    var height = browserHeight - 200; 

    document.getElementById("main").style.height = height; 
    document.getElementById("container").style.height = browserHeight ; 
    document.getElementById("container").style.width= browserWidth ; 

    setTimeout("updateMapSize()", 250); 

}

來源

2010-10-15 20:30:32

你並不需要使用Javascript，如下面使用的CSS代碼：

#header { height：100px; max-height：100px; }

＃主{ }

＃頁腳{ 高度：100像素; max-height：100px; bottom：0px; }

來源

2010-10-15 20:45:42

我相信他希望主要是100％-200px。主要應該總是儘可能大。這就是我從他的問題中得到的結果。 – 2010-10-15 20:48:30

是的，我明白了。此外，他希望將此頂部頁眉和頁腳保持爲100像素的高度。如果他想保持底部，你可以把位置：絕對;它會保持在底部。 #header {height：100px;最大高度：100像素; } ＃main {height：100％;最大高度：100％;最小高度：100％; } ＃footer {height：100px;最大高度：100像素; bottom：0px;位置：絕對的; } – 2010-10-15 20:53:30

as @Ryan提到，主要必須從頁腳 – 2010-10-15 21:00:44

html, body, #container, #main{ 
    width:100%; 
    height:100%; 
    } 

    #container 
    { 
    margin: 3em; 
    position:relative; 
    } 
    #header { 
    height: 100px; 
    position:absolute; 
    z-index:1; 
    } 
    #main { 
    position:absolute; 
    top:0; 
    left:0; 

    } 
    #footer { 
    position:absolute; 
    height: 100px; 
    bottom: 0px; 
    z-index:1; 
    } 

html 
    body 
    container 
     header 
     main 
     footer

上面的代碼應該給你你想要的#main將覆蓋整個屏幕，而你的像素，高100頁眉和頁腳坐了它的頂部。我現在在我的網站上使用此代碼http://patrickarlt.com。

在填充整個屏幕的div頂部的頁腳和頁眉網站。當用戶調整屏幕大小時，您可能還想要偵聽resize事件以調整#main中的項目大小。

但是，這不是IE 6的安全，但我的網站在IE 7和8上工作，最後我檢查了。

來源

2010-10-16 01:15:58

如何創建一個可以調整窗口大小的div？

回答

相關問題