CSS元素100％的父

我很難得到100％的頁面高度，包括包含divs。看起來會發生的是內部div將整個父元素的高度擴展到100％，而不僅僅是底部，即使它被上面的元素所取代，所以子元素會溢出父元素。CSS元素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>Home</title> 
    <style type="text/css"> 
    html, body, #container, #content 
    { 
     height: 100%; 
     min-height: 100%; 
    } 

    html { border: 1px solid red; } 
    #content { border: 1px solid blue; } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <h2>Test</h2> 

     <div id="content"> 
      <p>Testing</p> 
     </div> 
    </div> 
</body> 
</html>

我開始相信，只是這簡直是正確的行爲，是行不通的，但我想我會先問的集體智慧檢修方法之前。

來源

2010-06-24 Derek H

是的，你可以使用overflow: hidden;或開始玩浮游物和清除。

我不認爲上帝打算讓頁面恰好成爲一屏高度。 :-)

或者是允許垂直滾動條？如果是這樣，那麼你可以看看：http://matthewjamestaylor.com/blog/perfect-full-page.htm

來源

2010-06-24 05:00:44

我不完全相信你想實現什麼，但這：

html, body 
{ 
    height: 100%; 
    min-height: 100%; 
}

沒有道理。您無法控制body元素的高度，因爲它包含所有其他內容，並且html元素甚至不以「div」和「span」元素顯示的方式「顯示」。

您描述的行爲的確是預期發生的事情。無論何時將元素的高度/寬度設置爲100％，這意味着100％的父元素（在元素絕對定位的情況下可能有一些例外）。

來源

2010-06-24 04:05:20

烏爾CSS只是表現完全按照預期...

有隻用CSS來做到這一點沒有確切的辦法，沒有說什麼布洛克，非常複雜的浮動< - 根據定義，漂浮物需要知道固定的高度和寬度，並且不是動態的。（實際上大多數瀏覽器都會嘗試猜測）

如果您使用一個小小的java腳本來找出屏幕的高度，並且第一個內部div，然後將第二個內部div設置爲差異，這會容易得多。

<div id="container"> 
     <div id=content-top"> 
     <h2>Test</h2> 
     </div> 

     <div id="content"> 
      <p>Testing</p> 
     </div> 
    </div>

來源

2010-06-24 05:39:17 Kasumi

CSS元素100％的父

回答

相關問題