Question

我正在尝试让我的孩子div在父div内与height和width {}}}相匹配。留在其父母内部。

此外，我想在div中仅滚动div的孩子。我使用Y axis来实现这一点，但是它在X轴和Y轴上滚动。（参见下面的摘录）。

overflow-y:auto

#Parent {
  border: 2px solid #fff;
  border-style: solid;
  border-width: 1px;
  vertical-align: top;
  text-align: center;
  padding: 0 5px 5px 5px;
  background-color: red;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
#Parent > #Child {
  background-color: blue;
  font-family: arial, sans-serif;
  text-align: left;
  margin-top: 7px;
  padding-right: 20px;
  display: block;
  font-size: 11px;
  vertical-align: top;
  overflow-y: auto;
  width: 100%;
  height: 100%;
}

Answer 1

添加box-sizing:border-box以适合width / height

然后水平条是由于单词之间没有空格引起的，所以更进一步

更改overflow-y:auto

overflow-x:hidden

或者如果您打算使用没有空格的文本（这似乎不太可能）

使用word-wrap: break-word或word-break: break-all

＆＃13;

*,
*::before,
*::after {
  box-sizing: border-box;
}
#Parent {
  border: 2px solid #fff;
  text-align: center;
  padding: 5px;
  background-color: red;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
#Parent > #Child {
  background-color: blue;
  font-family: arial, sans-serif;
  text-align: left;
  padding-right: 20px;
  display: block;
  font-size: 11px;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

＆＃13;

<div id="Parent">
  <div id="Child">
    <p>
      dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>
    </p>
  </div>

</div>

＆＃13;

Answer 2

添加此样式即使没有空格也会导致文本换行：

#Parent > #Child {
  word-break: break-all;
}

＆＃13;

#Parent {
  border: 2px solid #fff;
  border-style: solid;
  border-width: 1px;
  vertical-align: top;
  text-align: center;
  padding: 0 5px 5px 5px;
  background-color: red;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
#Parent > #Child {
  background-color: blue;
  font-family: arial, sans-serif;
  text-align: left;
  margin-top: 7px;
  padding-right: 20px;
  display: block;
  font-size: 11px;
  vertical-align: top;
  overflow-y: auto;
  word-break: break-all;
  width: 100%;
  height: 100%;
}

＆＃13;

<div id="Parent">
  <h6>Help Me</h6>
  <div id="Child">
    <p>
      dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>dsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasdadsadasdasdasda
      <br>
    </p>
  </div>

</div>

＆＃13;

Answer 3

尝试在占位符文本中插入一些空格。问题是浏览器不会插入换行符，它会使子div变宽。但它不会成为真正文本的问题，它由单词组成，用空格分隔。

编辑：你也可以考虑@Rick Hitchcock的答案。

如何在子窗体内放置子div并仅在Y轴上滚动溢出文本

3 个答案: