內部div超過外部div邊界

我無法獲得內部div（與Hello World）以適應此代碼示例中的「box」div（也在http://www.toad-software.com/test.html）。內部div超過外部div邊界

儘管身體被設置爲100％，內部div將不會被包含！這是一個較大項目的測試用例，其中一個可變寬度的表格超出了其容器的邊界。該表將在內部的div和容器將「盒」。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     /*html { width: 100%; height: 100%; position: relative; background: #c0c0c0; } 
     body { position: absolute; width: 100%; height: 100%; background: #f9f9f9; }*/ 

     body, 
     html 
     { 
      margin: 0; 
      padding: 0; 
     } 

     body 
     { 
      width: 100%; 
     } 

     div.box 
     { 
      padding: 10px; 
      background: #ff33ff; 
     } 

    </style> 
</head> 
<body> 
    <div class="box"> 
     <div style="width: 1500px; height: 900px; background: #f12;">Hello World</div> 
    </div> 
</body> 
</html>

來源

2008-11-03 Caveatrob

是增加包含div還是縮小包含的div的目標？ – 2008-11-03 20:06:52

主體元件上的100％的寬度是相對於所述觀察口，這就是爲什麼你當您滾動背景色被切割。無論是在1520px的寬度設置爲你的身體encompase所包含股利或添加其他的div並執行以下操作：

div.box { width: 100px; overflow: auto; }

然而，作爲提醒一句，然後前往橫向滾動的路徑是一個壞主意在CSS和用戶體驗中的第一個項目。

來源

2008-11-04 03:39:28

添加overflow:hidden;到容器<div>

來源

2008-11-03 20:09:44 Javier

+1：謝謝，夥計。幫助我擺脫困境。 – 2011-03-09 19:15:07

內部div超過外部div邊界

回答

相關問題