之前，所有 this 是我的页面，我正在使用 css @media 创建布局。查询，用于检测和调整页面，具体取决于浏览器的像素....
一切顺利，但如果你看到:
<div id='x'>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
</div>
你会注意到，它已经溢出了父级 div这是<div id='sep'></div>仅当从桌面查看时。
您可以查看页面的源代码，或者这里是完整代码:
<html>
<head><style>
body{margin:0px; padding:0px;}
#a{height:150px; background-color:#ffffff; border-bottom:1px solid #CCC;}
#x{min-height:350px; margin-top: 10px; background-color:#CCC;}
#y{min-height:30px; margin-top: 10px; background-color:#CCC;}
@media all and (min-width:700px){
#b{width:100%; min-height:400px;}
#sep{width:960px; margin:auto;}
#x{width:65%; float:left;}
#y{width:32%; float:right; }
#c{background-color:#656565; height:80px;}
.for-mob{display:none;}
.for-desc{background-color:green;}
}
@media all and (max-width:700px){
.for-mob{background-color:green;}
.for-desc{display:none;}
#b{width:100%; min-height:400px; }
#x{width:100%; display:block; }
#y{width:100%; display:block; }
#c{background-color:#656565; height:100px;}
}
</style></head>
<body>
<div id='a'> <h1>I am header </h1>
</div>
<div id='b'>
<div id='sep'>
<div id='x'>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
</div>
<div id='y'>
<h1>I am sidebar </h1>
</div>
</div>
</div>
<div class='for-desc'><h1>If you shrink the browser, I become invisible</h1> </div>
<div class='for-mob'><h1>If you maximize the browser, I become invisible</h1></div>
<div id='c'>
<h1> I am a simple footer </h1>
</div>
</body>
最佳答案
由于您没有为 #sep 指定任何高度，这意味着您希望它随内容展开。你可以添加 overflow: hidden 让它展开
#sep {
margin: auto;
overflow: hidden;
width: 960px;
}
如果此答案不能回答您的问题，请在问题中陈述您的要求:)
关于html - div 内容溢出到另一个 div 之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16407069/