HTML/CSS/Javascript：强制子元素在不修改子元素的情况下永远不会超过父元素大小答案

【问题标题】：HTML/CSS/Javascript: Force child elements to never exceed parent size without modifying childrenHTML/CSS/Javascript：强制子元素在不修改子元素的情况下永远不会超过父元素大小
【发布时间】：2017-03-01 17:37:06
【问题描述】：

所以我喜欢 iframe 如何巧妙地包含框架内的所有站点数据并使其适合大小。有没有办法在 html 包装器中生成这种行为？以这样的方式设置包装器，无论如何，内容都显示在其大小格式中，而不以任何方式手动修改子元素？

【问题讨论】：

请提供您的初始代码以及到目前为止您尝试过的内容。小提琴会更好。
您只需要指定父容器的宽度（如果我理解您的问题）
CSS overflow: auto;。看到这个link！我想这就是你想要的！
@GeomanYabes 不是真的，因为当我用谷歌搜索这个问题时，人们之前曾问过这个问题，最终得到了对他们试图包含的元素的自定义响应。当我询问实现这一目标的全球一致方式时（如果可能的话），我选择省略代码以防止人们以这种方式回答。
@ibrahimmahrir 这不适用于position: fixed的子div

标签： javascript html css

【解决方案1】：

设置大小（宽度和高度）并使用溢出：隐藏。如果孩子超出大小，则内容将被隐藏。

【讨论】：

只是隐藏内容，而不是挤压它们。它也不适用于 position: fixed 的子 div
很高兴知道，从来没有这种情况^^

【解决方案2】：

考虑以下两个 CSS 属性

这将不允许内容超出容器

.container{
   overflow : hidden;
   width : <size>;
   height : <size>;
}

这会在内容超过容器大小时自动为容器添加滚动条

.container{
   overflow : auto;
   width : <size>;
   height : <size>;
}

【讨论】：

【解决方案3】：

您可以将您的内容放在<div> 中，然后对其进行操作：

#wrapper {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  overflow: auto;
  position: relative;
  border: 1px solid red;
}

<div id="wrapper">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

注意position: relative！当您在position: absolute 中包含元素时，这一点很重要！查看this answer，同样引用here：

绝对的。这是一种非常强大的定位类型，它允许您将任何页面元素准确地放置在您想要的位置。您使用定位属性 top、left bottom 和 right 来设置位置。 请记住，这些值将相对于具有相对（或绝对）定位的下一个父元素。

或者，如果您正在谈论“像<iframe>”那样挤压整个页面，您可以修改<html> 和<body> 标签。 不过，我认为这不是一个好习惯。

使用margin: 0 auto，您可以将页面居中。
使用overflow: auto，您可以启用滚动，这样内容就不会超出页面。

html, body {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  padding: 0;
  overflow: auto;
  border: 1px solid red;
}

&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;

【讨论】：