如果我使用HTML5文檔類型，爲什麼我無法讓自己的div高度達到100％？我如何獲得它100％的高度

我正在努力獲得佈局分類爲一個非常簡單的畫廊webapp，但是當我使用HTML5文檔類型聲明時，我的一些div（這是100％）的高度收縮的權利下來，我似乎無法使用CSS恢復它們。如果我使用HTML5文檔類型，爲什麼我無法讓自己的div高度達到100％？我如何獲得它100％的高度

我的HTML是https://dl.dropbox.com/u/16178847/eyewitness/b/index.html和CSS是https://dl.dropbox.com/u/16178847/eyewitness/b/style.css

如果我刪除了HTML5 doctype聲明，一切都是因爲我希望它是，但我真的想用正確的HTML5 doctype聲明。
如果我將doctype設置爲HTML5並且不做任何更改，則帶有照片和頁腳div的div不可見，可能是因爲它們高0px。
如果我將doctype設置爲HTML5並使body { height: 100px }和.container { height: 100px }或.container { height: 100% }變爲可見，但我需要的是全高，而不是以像素爲單位的高度。
如果我嘗試做與上述相同的操作，但使用body { height: 100% }時，照片和頁腳div不再可見。

我需要做些什麼才能讓它的高度達到100％，以便我的照片和頁腳div全高？

來源

2012-06-03 Grezzo

這有什麼好做HTML5或CSS3。（其他doctype會發生什麼情況？從什麼時候開始'height'是一個新的CSS3事物？） – BoltClock

當你使身體達到100％的高度時，你期望它達到100％的高度？ – robertc

@BoltClock感謝您的評論。這是關於CSS3的一個公平點，我已經刪除了該標籤。我還沒有嘗試過任何其他的文檔類型，我只嘗試過沒有文檔類型或HTML5文檔類型。你希望從其他doctype聲明的行爲中找出什麼？我非常樂意嘗試一些並回報，但我不確定哪些與嘗試相關？ – Grezzo

僅當父元素具有定義的高度時，i..e不是值auto。如果它具有100％的高度，則也必須定義父母的父母高度。這可以直到html根元素。

所以設置html的高度和body元素100%，以及您希望有擺在首位的100%height該元素的每一個祖先元素。

來源

2012-06-03 16:30:36 HerrSerker

那麼你是說（在標準模式下）沒有辦法使頁面相同高度作爲視口（不使用JavaScript來設置高度單位而不是百分比）？ – Grezzo

我說你可以。給html元素100％的高度，給身體元素100％高度等等，以及身體的每個子元素和該元素的子元素，直到你到達想要成爲100％的元素爲止。 – HerrSerker

這正是解決方案，我不知道你可以將CSS應用到html元素。好一個！ – Grezzo

事實上，使其工作做如下：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Vertical Scrolling Demo</title> 
    <style> 
    html, body { 
     width: 100%; 
     height: 100%; 
     background: white; 
     margin:0; 
     padding:0; 
    } 
    .page { 
     min-height: 100%; 
     width: 100%; 
    } 
    </style> 
</head> 
<body> 
    <div id="nav" class="page"> 
    <ul> 
     <li><a href="#about">About</a></li> 
     <li><a href="#portfolio">Portfolio</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
    </div> 
    <div id="page1" class="page"> 
    <h1><a name="about">about</a></h1> 
    About page content goes here. 
    </div> 
    <div id="page2" class="page"> 
    <h1><a name="portfolio">portfolio</a></h1> 
    Portfolio page content goes here. 
    </div> 
    <div id="page3" class="page"> 
    <h1><a name="contact">contact</a></h1> 
    Contact page content goes here. 
    </div> 
</body> 
</html>

來源

2012-06-08 08:50:51 barraq

如果我使用HTML5文檔類型，爲什麼我無法讓自己的div高度達到100％？我如何獲得它100％的高度

回答

相關問題