如何獲得DIV塊以填充屏幕的90％？

我嘗試下面的代碼：如何獲得DIV塊以填充屏幕的90％？

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 

    <style type="text/css"> 
     #outer { 
      width: 90%; 
      height: 90%; 
      margin: 5% 5% 5% 5%; 
      background-color: #333; 
     } 
     #left-content { 
      height: 90%; 
      width: 50%; 
      padding: 2em; 
     } 
     #right-content { 
      height: 90%; 
      width: 50%; 
      padding: 2em; 
     } 
    </style> 

    <div id="outer" style="display: block"> 
     <div id="left-content" style="display: block">xx</div> 
     <div id="right-content" style="display: block">xx</div> 
    </div> 

</body> 
</html>

但是外DIV仍然沒有填補太多的畫面。我怎樣才能讓這個DIV填滿90％，並留下5％的邊界呢？

來源

2013-01-08 Melina

你需要給你的html和body高度：

body, html{ 
    height: 100%; 
}

來源

2013-01-08 01:40:50

問題修復，現在有另一個問題。但是，我會標記你的答案是正確的，併發佈下一個問題，因爲它涉及內部div。謝謝 – Melina

@梅麗娜什麼是其他問題？ – 2013-01-09 02:50:10

您需要設置您的文檔和身體100％的寬度/高度。

body,html 
{ 
width:100%; 
height:100%; 
}

作爲一個側面說明，你內心的div需要使用浮動屬性的，如果你真的想要一個在左，一個在右。這或一些像素完美的偏移量。

如果你確實將它們浮起來，你將無法逃脫擁有兩個帶填充或邊距的50％div，除了div的寬度/高度之外，填充和邊距。您可能需要閱讀css box model。

來源

2013-01-08 01:51:30 savageguy

如何獲得DIV塊以填充屏幕的90％？

回答

相關問題