logo标签列表

为什么我的div超出了其父级div的范围？

htmlcss
3

消息框id为"message-box"的div超出了其父级div "message-container"，我不明白为什么？

在我的css中使用了"overflow:auto;"，但仍未达到预期结果。当我在"message-box"上使用"overflow:auto"时，左边距没有正常工作。

以下是我的HTML文件：

<html>

<head>
<link rel="stylesheet" type="text/css" href="styles.css" >  
<title>temp</title>
</head>

<body>

<div id="main">

<div id="header">header</div>

<div id="container">
    <div id="user-container">user</div>

    <div id="message-container">
        <div id="message-box">message box</div>
        <div id="text-box"> text box</div>
    </div>
</div>

<div id="footer">footer</div>
</div>

</body>
</html>

以下是我的CSS文件：
#main{
    border: 1px solid red;
    margin: 5px;
}

#header{
    border: 1px solid red;
    height:30px;
    margin: 10px;
}

#container{
    margin:10px;
    height:32em;
}
#footer{
    border: 1px solid red;
    height:30px;
    margin: 10px;
}

#user-container{
    border: 1px solid red;
    float:left;
    width:120px;
    height:32em;    
}
#message-container{
    border: 1px solid red;
    height:32em;
    width:100%;

}
#message-box{
    border: 1px solid grey;
    overflow:auto;
    margin:5px;
}
#text-box{
    border:1px solid grey;
    overflow:auto;
    margin:5px;
}

请有人在这里帮我一下。

4
这不是：http://jsfiddle.net/r1y4oh68/ - undefined
谢谢。但是看到那个灰色边框了吗？它没有任何左边距。为什么会发生这种情况？ - undefined
试一下这个：http://jsfiddle.net/6wj8bqqa/1/ - undefined
2个回答
6

快速回答

#message-box 在与 #message-container div 相关的所有边缘上都有正确的边距，但问题在于 #message-container 和 #message-box 都溢出到了 #user-container 中。由于 #message-box 具有 overflow 属性，它被裁剪在溢出到 #user-container 的正好边缘处。由于 #message-container 没有 overflow，它继续流向 #user-container 的后面，直至 #container div 的边缘。解决方法是将 overflow 添加到 #message-container。

#message-container {
  height: 32em;
  border: 1px solid red;
  overflow: hidden;
}

我想你在这里需要使用overflow: hidden来剪切溢出的内容; overflow: auto 会添加滚动条以查看溢出的内容。
解释： #user-container上的float导致了问题。 浮动将元素从正常文档“流”中移除（请参见下面的正常文档流）。
我为#user-container（绿色）和#message-container（蓝色）添加了背景颜色，以便您可以看到正在发生的事情。 如果您从#text-box和#message-box中删除overflow，则会发现间距在#message-box和#message-container之间实际上是正常工作的。将它们添加回去，您将看到它们如何被#user-container裁剪。 以下是正在发生的事情：http://jsfiddle.net/fmceqbdp/2/ 正常文档流：
DOM具有元素层次结构。 文档是最高级别的父代（或最外部框），您添加的任何元素都是其子代。 元素的起始位置是其父元素的左上角。 如果在同一级别（未嵌套）添加另一个元素，则它是文档的另一个子项，并且是第一个元素的兄弟项。 兄弟也希望尽可能靠近文档的左上角定位，但它被第一个元素（内联）推向右侧或移到下一行（块）。 当您将一个元素嵌套在该元素中时，嵌套的元素是子元素，它包含在父元素中。 它的起始位置是其父元素的左上角。 这是正常的文档流。 浮动元素从这个正常流中删除，因此它不会像通常那样推动其他元素。
浮动元素的行为：
是块元素，它们使其他元素远离。 但是，当您将元素浮动时，它会将该元素从正常文档流中移除--这意味着其位置对于同层次的兄弟元素（在同一级别的元素）是不可见的，因此它们现在前面或后面地定位在浮动元素之前或之后，就好像浮动元素不存在一样。 因为您浮动了#user-container，所以#message-container填满了整个#container，就好像#user-container不存在一样。
溢出如何工作：
具有overflow属性的元素将自我清除，以防止溢出到其他元素中。这就是为什么#message-container会流入占据#user-container空间的原因，但其子元素#message-box和#text-box使用了overflow属性，已经清除了自己，不会流入#user-container的空间。它们的边距仍然相对于它们的父元素#message-container，而不是被裁剪的位置，这就是为什么它们在遇到#user-container时似乎没有左边距的原因。
要了解更多详情，请访问http://css-tricks.com/the-css-overflow-property/ -- 滚动页面约四分之一处。
0

你需要在 #message-container 上添加一个 overflow 属性，因为它是被 float 推动的 div ，而不是它的子代。#message-box 和 #text-box 不与它们父元素的前一个兄弟元素进行交互。

所以，请移除所有的 overflow: auto; 并执行以下操作：

#message-container {
  height: 32em;
  border: 1px solid red;
  overflow: hidden;
}

这是一个Fiddle： http://jsfiddle.net/Ljqmjzkp/1/ 附注：清理了代码，使其更易读，并根据您的DOM进行了缩进，这样你可以看到结构。记住这点，它会有所帮助 ^^
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接