内部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边界

回答

相关问题