內部div超過外部div邊界

[英]Inner div exceeds outer div boundaries


I can't get the inner div (with Hello World) to fit inside the "box" div in this code example (also at http://www.toad-software.com/test.html).

我不能讓內部div(使用Hello World)適合此代碼示例中的“box”div(也在http://www.toad-software.com/test.html)。

Despite the body being set to 100%, the inner div will not be contained! This is a test case for a larger project in which a variable-width table exceeds the boundaries of its container. The table would be in the inner div and the container would the "box."

盡管身體設置為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>

2 个解决方案

#1


7  

The 100% width on the body element is in relation to the view port, which is why you're background color is cutting when you scroll. Either set a width to your body at 1520px to encompase the contained div or add another div and do the following:

body元素的100%寬度與視口相關,這就是滾動時背景顏色正在切割的原因。在1520px處為您的身體設置寬度以包含所包含的div或添加另一個div並執行以下操作:

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

However, as a word of warning, heading down the path of horizontal scrolling is a bad idea for a first project in css and in user experience.

然而,作為一個警告,沿着水平滾動的路徑前進對於css中的第一個項目和用戶體驗來說是一個壞主意。

#2


9  

add overflow:hidden; to the container <div>

添加溢出:隱藏;到容器


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2008/11/03/72a232deed48462810501cef17f91b0e.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com