为什么这个 CSS 中的内部 div 是从父 div 出来的？ [复制]答案

【问题标题】：Why is the inner div comming out of the parent div in this CSS? [duplicate]为什么这个 CSS 中的内部 div 是从父 div 出来的？ [复制]
【发布时间】：2021-05-14 18:58:33
【问题描述】：

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: "#00b7ff"
}

#content {
  background-color: aquamarine;
  width: 800px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid blueviolet;
}

#room {
  background-color: burlywood;
  margin-bottom: 1em;
}

#messages {
  width: 690px;
  height: 300px;
  overflow: scroll;
  background-color: cadetblue;
  margin-bottom: 1em;
  margin-right: 10px;
  border: 2px solid blue;
}

<div id='content'>
  <div id='room'></div>
  <div id='room-list'></div>
  <div id='messages'></div>

  <form id='send-form'>
    <input id='send-messsage' />
    <input type=s ubmit id='send-button' value='Send' />

    <div id='help'>
      Chat commands:
      <ul>
        <li>Change nickname: <code>/nick [username]</code> </li>
        <li>Join/create room: <code>/join [room name]</code> </li>
      </ul>
    </div>

  </form>

</div>

结果：

请解释为什么内部矩形会出来，可以采取什么措施来防止它？

【问题讨论】：

您的代码中的内容和消息 ID 在哪里？
@techie_questie 代码未正确显示。现在请再看一遍。
300px + 300px 内的东西肯定会造成溢出

标签： javascript html css

【解决方案1】：

我相信这可能会有所帮助：

如果我们将#message 的高度降低到282px，它将正确对齐。因为上面的 div 是 #room 占用 1em = 16px 而 #content 占用 2px 边框。所以总共 18px 它是从父 div 出来的。

我已经尝试了它工作正常的更改。

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: "#00b7ff"
}

#content {
  background-color: aquamarine;
  width: 800px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid blueviolet;
}

#room {
  background-color: blurrywood;
  margin-bottom: 1em;
}

#messages {
  width: 690px;
  height: 282px;
  overflow: scroll;
  background-color: cadetblue;
  margin-bottom: 1em;
  margin-right: 10px;
  border: 2px solid blue;
}

<div id='content'>
  <div id='room'></div>
  <div id='room-list'></div>
  <div id='messages'></div>

  <form id='send-form'>
    <input id='send-messsage' />
    <input type=s ubmit id='send-button' value='Send' />

    <div id='help'>
      Chat commands:
      <ul>
        <li>Change nickname: <code>/nick [username]</code> </li>
        <li>Join/create room: <code>/join [room name]</code> </li>
      </ul>
    </div>

  </form>

</div>

【讨论】：

【解决方案2】：

  #content{
    overflow:hidden;
    }
#messages{
line-height:50%;
}

【讨论】：

【解决方案3】：

#message div 太大。
父div的默认overflow属性显然设置为visible。

现在，至于如何解决它，这取决于您要做什么。但这是两个促成因素。

【讨论】：

我想将内部 div 放入父 div 的边界内。