html – 内部div超过外部div边界

前端之家收集整理的这篇文章主要介绍了html – 内部div超过外部div边界前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我不能让内部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>

解决方法

body元素的100%宽度与视口相关,这就是滚动时背景颜色正在切割的原因.在1520px处为您的身体设置宽度以包含所包含的div或添加另一个div并执行以下操作:
div.Box { width: 100px; overflow: auto; }

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

原文链接:https://www.f2er.com/html/226496.html

猜你在找的HTML相关文章