CSS：是否有可能獲得100％高度的div，而不是頂部和底部邊距？

我可以得到100％的高度DIV，像這樣：CSS：是否有可能獲得100％高度的div，而不是頂部和底部邊距？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <title>T5</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

    <link rel="stylesheet" type="text/css" 
      href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"> 
    </link> 

    <style type="text/css"> 
     * { padding: 0; margin: 0; } 
     html, body { height: 100%; } 
     body { 
     font-family: "lucida sans", verdana, arial, helvetica, sans-serif; 
     font-size: 75%; 
     } 
     h1 { font-weight: bold; font-size: 1.4em; padding: 10px 10px 0;} 
     p { padding: 0 10px 1em; } 
     #container { 
     min-height: 100%; 
     background-color: #DDD; 
     border-left: 2px solid #666; 
     border-right: 2px solid #666; 
     width: 280px; 
     margin: 0 auto; 
     } 
     * html #container { height: 100%; } 
    </style> 
    </head> 
    <body> 
    <div id="container"> 
     <h1>100% Height Div</h1> 
     <p>Lorem ipsum ...</p> 
    </div> 
    </body> 
</html>

它看起來像這樣：

alt text http://i41.tinypic.com/1j1do8.jpg

當我說「100％的高度」 - 我的意思是它保持全高不管div中有多少內容，也不管窗口如何調整大小。

但是有可能得到一個高度幾乎100％的高度的div嗎？如果我想要利潤率在頂部和底部，我可以這樣做嗎？

我希望它看起來像這樣：

alt text http://i44.tinypic.com/j76kvl.jpg

我可以用JavaScript + CSS做到這一點。我可以用CSS來做到嗎？

答：
是的，這是可能的絕對定位。

#container { 
    width: 380px; 
    background-color: #DDD; 
    border: 2px solid #666; 
    position: absolute; 
    top: 20px; /* margin from top */ 
    bottom: 20px; /* margin from bottom */ 
    left: 50%; /* start left side in middle of window */ 
    margin-left: -190px; /* then, reverse indent */ 
    overflow: auto; /* scrollbar as necessary */ 
    }

結果：

alt text http://i42.tinypic.com/33vj3nq.jpg

感謝to keithjgrant for the answer。查看http://jsbin.com/otobi的所有代碼。

來源

2010-03-22 Cheeso

不能通過添加_padding：20px 0 20px 0; _到#container id樣式嗎？ – amelvin 2010-03-22 23:05:59

不，因爲填充和邊距被添加到高度/寬度。所以這會使100％+ 40px的高度。 – poke 2010-03-22 23:10:43

你需要在你的容器內部創建一個內部容器，然後將填充添加到那個 – stephenmurdoch 2010-03-23 16:10:26

試試絕對定位：

#container { 
    position: absolute; 
    top: 20px; 
    bottom: 20px; 
}

它可以在IE6是古怪（？什麼不是），但也有很多技巧的，如果你谷歌嘗試周圍。其中一些包括添加clear: both規則或將絕對定位的div封裝在另一個div中。

overflow: auto應使滾動條的行爲與您所描繪的一樣。

編輯：或者，您可以20像素的填充添加到包裝DIV，然後用無餘量設置你的容器height: 100%，它應該填補其包裝的填充。

來源

2010-03-23 15:42:47 keithjgrant

這個作品，謝謝！ – Cheeso 2010-03-23 17:29:46

不知道我是否錯過了一些東西，但爲什麼不加margin-top: 20px; margin-bottom: 20px到#container，如果你想要利潤？

來源

2010-03-22 23:00:13

@poke寫道：「不，因爲填充和邊距被添加到高度/寬度，所以這將使100％+ 40px的高度。」 – 2010-03-23 00:36:41

兩個選項：

1）您可以使用類似

#theDiv { 
    top: 16px; 
    bottom: 20px; 
}

但這隻會在標準的制定工作兼容的瀏覽器和IE> = 7，如IE 6將無法正常工作時使您的DIV使用top和bottom。

2）您可以更改box model，使其包含頂部和底部的邊框內的給定的height。使用讓您可以假冒top和bottom使用

#theDiv { 
    border-top: 16px; 
    border-bottom: 20px; 
}

像

* { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -khtml-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing: border-box; /* IE >= 8 */ 
}

，並把IE 6和IE 7的怪癖模式（通過把一些東西，比如HTML註釋，在DOCTYPE之前）使用border-box框模型。

如果你想支持IE 6，你必須使用＃2。因此，在IE 6中，只有在需要時才能使用quirks模式（IE 6中唯一支持這一功能的選項是使用CSS表達式，但它們非常耗費CPU資源，因爲IE的J（ava）腳本引擎必須重新計算這些每個調整大小的寬度和高度）。

來源

2010-03-22 23:09:39

MS確實支持'-ms-box-sizing'嗎？我知道'-ms-box-radius'在IE8中甚至不起作用。 – 2010-03-22 23:16:20

@TheEl：根據鏈接頁面（http://www.quirksmode.org/css/box.html），是的，根據這個（愚蠢設計的）PDF http://download.microsoft.com/download/ F/F/E/FFEB6B00-64B9-450F-93B3-2781D9F36210/BoxSizing-DeveloperSeriesInformationPage.pdf，IE8同時支持'box-sizing'和'-ms-box-sizing'。 – 2010-03-22 23:57:02

它不像CSS那樣精確，但您可以在容器頂部和底部添加一個BR標籤，並將您的100％最小邊距調整爲90-95％。

來源

2010-03-22 23:13:55 MaxGeek

沒錯。這有效，但它對調整大小的反應並不好。 – Cheeso 2010-03-23 13:34:01

你可以使用第二個DIV內有填充，以實現真正的「外部」填充：

<div style="height: 100%; width: 500px; margin: 0 auto; background: #CCC; border: solid #999; border-width: 0px 2px;"> 
<div style="padding: 20px 0px;"> 
    Content here 
</div> 
</div>

另外，如果你不顯示任何東西，你也可以使用body的外施工。

編輯：其實，你將不得不使用min-height的外格，讓您的網頁時，屏幕的大小高於100％的後臺工作。例如，這工作得很好：

<?xml version="1.0" encoding="utf-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
<title>Test</title> 
<style type="text/css"> 
    html 
    { height: 100%; padding: 0; margin: 0; background: #FFF; } 
    body 
    { min-height: 100%; margin: auto; width: 500px; 
    background: #CCC; border: solid #999; border-width: 0 2px; } 
    div#main 
    { padding: 20px 15px; } 
</style> 
</head> 

<body> 
<div id="main"> 
<h1>100% Height Div</h1> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo 
    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis 
    parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, 
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec 
    pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, 
    rhoncus ut, imperdiet a, venenatis vitae, justo.</p> 
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo 
    ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
    dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus 
    varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel 
    augue.</p> 
</div> 
</body> 
</html>

來源

2010-03-22 23:14:35 poke

這是否適用於IE6？無論如何，@Cheeso是否想要支持IE6？ – 2010-03-22 23:36:46

Iirc，IE6不支持'min-height'，但我懷疑是否有其他方法可以使這項工作（當然不使用JavaScript）。但以後每個瀏覽器都支持它。 – poke 2010-03-23 00:09:22

我試過了，我沒有在div上獲得保證金。 – Cheeso 2010-03-23 13:30:03

CSS：是否有可能獲得100％高度的div，而不是頂部和底部邊距？

回答

相關問題