html - 为什么这个父元素没有完全包含它的子元素？

当我的浏览器窗口最大化时，此代码可以正常工作，子项包含在父项中，而父项跨越浏览器的宽度。但是，当浏览器窗口小于子元素宽度时，父元素无法包含它(在chrome 20和firefox 13中测试)

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example</title>

        <style type="text/css">
            #toolbar {
                background-color:#cccccc;
                padding:10px 0;
            }

            #nav {
                background-color:#00cccc;
                margin:0 auto;
                width:1000px;
            }
        </style>
    </head>
    <body>

        <div id="toolbar">
            <div id="nav">NAVIGATION</div>
        </div>

    </body>
</html>

我可以通过 float 父级并给它一个 100% 的最小值来解决这个问题，但这似乎是错误的。我该怎么做才能解决这个问题？

最佳答案

#toolbar 是一个 block 级元素，默认为 width:100% - 父元素的 100% 宽度。这是它遵守的规则，让 child 在宽度超过时溢出。您可以通过设置溢出属性来调整它。

但是，如果您希望父 div 考虑到它的子宽度，请设置一个最小宽度(等于子宽度)重要提示:您必须考虑可能的边距和填充(或更改框-模型到边框框)。