Html 内部 div 超出外部 div 边界
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/259753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inner div exceeds outer div boundaries
提问by Caveatrob
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).
在此代码示例（也在http://www.toad-software.com/test.html）中，我无法将内部 div（带有 Hello World）放入“box”div 中。
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."
尽管将 body 设置为 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>
回答by Javier
add overflow:hidden;to the container <div>
添加overflow:hidden;到容器中<div>
回答by Steve Perks
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 和用户体验的第一个项目来说，沿着水平滚动的道路前进是一个坏主意。
