Question

我无法让内部div（使用Hello World）适合此代码示例中的“box”div（也在http://www.toad-software.com/test.html）。

尽管正文设置为100％，但内部div不会被包含！这是一个大型项目的测试用例，其中可变宽度表超出了其容器的边界。该表将位于内部div中，容器将为“box”。

<!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>

Answer 1

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

Answer 2

body元素的100％宽度与视口相关，这就是滚动时背景颜色正在切割的原因。在1520px处为您的身体设置宽度以包含所包含的div或添加另一个div并执行以下操作：

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

然而，作为一个警告，沿着水平滚动的路径前进对于css中的第一个项目和用户体验来说是一个坏主意。

内部div超过外部div边界

2 个答案: