Question

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

Answer 1

设置大小（宽度和高度）并使用overflow：hidden。如果孩子超过大小，则隐藏内容。

Answer 2

您可以将内容放在<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的引用：

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

或者，如果您正在谈论像“<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;
}

<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>

Answer 3

考虑以下两个CSS属性

这不允许内容超出容器

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

当内容超出容器大小时，这会自动将滚动条添加到容器中

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

HTML / CSS / Javascript：强制子元素永远不会超过父级大小而不修改子级

3 个答案: