如何在DIV中放置兩個DIV，以便DIV填充屏幕的90％？

我很抱歉不斷詢問相同問題的版本，但這似乎很難實現。這裏是我到目前爲止的代碼：如何在DIV中放置兩個DIV，以便DIV填充屏幕的90％？

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

    <style type="text/css"> 

     body, html{ 
    height: 100%; 
} 
     #outer { 
      width: 90%; 
      height: 90%; 
      margin: 5% 5% 5% 5%; 
      background-color: #333; 
     } 
     #left-content { 
      height: 100%; 
      width: 50%; 
      float:left; 
     } 
     #right-content { 
      height: 100%; 
      width: 50%; 
      float:left; 
     } 
    </style> 

    <div id="outer"> 
     <div id="left-content" style="background-color: red;">xx</div> 
     <div id="right-content" style="background-color: yellow;">xx</div> 

<!-- we need to clear --> 
<br style="clear:both" /> 

    </div> 

</body> 
</html>

現在看來，我看到滾動條，但我只是想外DIV佔據90％的屏幕，有不被滾動條。

找到fiddle here。

來源

2013-01-08 Melina

這裏是我會怎麼做：http://jsfiddle.net/remibreton/8hfwp/1/

這裏的關鍵是要離開瀏覽器弄清楚外部元素的寬度和高度。爲此，請指定top:0; bottom:0; left:0; right:0;以確保填充整個可用空間。然後，您添加margin:5%;以將高度和寬度降低至90％。外部元素應該是position:relative;以允許絕對定位在它內部。

對於內容元素，它們都可以是width:50%; height:100%。你需要做的是確保正確的一個得到特殊的治療left:50%。

HTML

<div id="outer"> 
    <div class="content left">xx</div> 
    <div class="content right">xx</div> 
</div>

CSS

body, html { height: 100%; } 
#outer { position:absolute; margin:5%; bottom:0; top:0; left:0; right:0; overflow:hidden; } /* margin:5% to make sure the width and height are actually 90%. Overflow is optional */ 
.content { position:absolute; width:50%; height:100%; } /* Applies to both content element */ 
.content.left { background-color:yellow; } 
.content.right { background-color:red; left:50%; } /* Left position is equal to the right content element */

這種方法可以更清潔和更靈活的CSS比你以前有什麼。獎金互聯網點！

來源

2013-01-08 03:18:38

-1

它似乎是由邊緣崩潰導致錯誤引起的。將padding:0.01px添加到<body>，它的工作原理應該如此。

如果你想在屏幕上的東西固定大小的，你應該只使用position:fixed像這樣：

#outer { 
    position:fixed; 
    left: 5%; right: 5%; top: 5%; bottom: 5%; 
    background:#333; 
} 
#left-content { 
    position:absolute; 
    left:0; top: 0; width:50%; bottom: 0; 
} 
#left-content { 
    position:absolute; 
    left:50%; top: 0; width:50%; bottom: 0; 
}

來源

2013-01-08 03:16:36

它不適用於填充：1px或0.01px（其中btw是錯誤的像素數量） –

當我嘗試它時工作得很好，並且'0.01px'完全有效。如果像「13.33px」這樣的值無效，那麼「10pt」也是如此。 –

請參閱http://www.w3.org/TR/css3-values/#absolute-lengths通過將像素視爲最低單位，我們不能分割像素。 –

試試這個：

body, html{ 
     height: 100%; 
     margin: 0; 
    } 
    #outer { 
     width: 90%; 
     height: 90%; 
     position: absolute; 
     margin: 5%; 
     background-color: #333; 
    }

來源

2013-01-08 03:18:09 thedragonaut

這是一個非常有趣的錯誤我已經沒看過。如果沒有與討厭body { overflow:hidden; }辦法去，我發現了一些修正：

1 - 使用display：inline-block的（不實際所需）

#outer { 
     display:inline-block; 
     width: 90%; 
     height: 90%; 
     margin: 5% 5% 5% 5%; 
     background-color: #333; 
    }

2 - 使用填充代替保證金（不實際所需）

#outer { 
     width: 90%; 
     height: 90%; 
     padding: 5% 5% 5% 5%; 
     background-color: #333; 
    }

3 - 使用位置絕對（推薦）

#outer { 
     position:absolute;top: 5%;bottom: 5%;right: 5%;left: 5%; 
     background-color: #333; 
    }

我會編輯這個問題的進一步調查這個問題。

作爲每http://www.w3.org/TR/CSS2/box.html#box-dimensions

百分率的計算相對於所生成的框的包含塊的寬度。請注意， 'margin-top'和'margin-bottom'也是如此。

這意味着如果將90％的寬度放在身體上，將導致5％的邊距爲90％中的5％，而不是預期的100％，這會導致「錯誤」。 - 同樣適用於填充。

來源

2013-01-08 03:18:26

將溢出屬性更改爲隱藏（overflow:hidden;），然後將#outer的邊距更改爲margin:2.5% 5%;。這裏是完整的代碼：

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

    <style type="text/css"> 

     body, html{ 
    height: 100%; 
    overflow:hidden; 
} 
     #outer { 
      width: 90%; 
      height: 90%; 
      background-color: #333; 
      margin: 2.5% 5%; 
     } 
     #left-content { 
      height: 100%; 
      width: 50%; 
      float:left; 
     } 
     #right-content { 
      height: 100%; 
      width: 50%; 
      float:left; 
     } 
    </style> 

    <div id="outer"> 
     <div id="left-content" style="background-color: red;">xx</div> 
     <div id="right-content" style="background-color: yellow;">xx</div> 

<!-- we need to clear --> 
<br style="clear:both" /> 

    </div> 

</body> 
</html>

希望它能工作！

來源

2013-01-08 03:35:36

如何在DIV中放置兩個DIV，以便DIV填充屏幕的90％？

回答

相關問題