TL; DR： 今天，最好的选择是这个答案中的最后一个-
flexbox。一切都很好地支持它，并且已经有很多年了。为此，不要回头。由于历史原因，其余答案均保留下来。
诀窍是要了解100％是什么。阅读CSS规范可以为您提供帮助。
长话短说-有一个“包含块”之类的东西-
父元素不是必需的。简而言之，这是层次结构中具有position：relative或position：absolute的第一个元素。如果没有其他内容，则为body元素本身。因此，当您说“
width：100％”时，它将检查“包含块”的宽度，并将元素的宽度设置为相同的大小。如果那里还有其他东西，那么您可能会获得比其自身大的“包含块”的内容（因此“溢出”）。
高度的工作方式相同。 除了一个例外。
您无法将浏览器窗口的高度提高到100％。最上层的元素（可以计算出100％）是body（或html？不确定）元素，其拉伸范围足以容纳其内容。在其上指定height：100％将无效，因为它没有要对其进行100％测量的“父元素”。窗口本身不计算在内。;）
要使某物精确地延伸到窗口的100％，您有两种选择：
- 使用Javascript
- 不要使用DOCTYPE。这不是一个好习惯，但是会使浏览器处于“怪癖模式”，在这种模式下，您可以对元素执行height =“ 100％”并将其扩展到窗口大小。请注意，页面的其余部分可能也必须进行更改以适应DOCTYPE的更改。
更新： 我不确定发布此消息时是否还没有错，但是现在肯定已经过时了。今天，您可以在样式表中执行此 *** 作：
html, body { height:100% }它实际上将扩展到整个视口。即使使用DOCTYPE。min-height: 100%视您的情况而定也可能有用。
而且我 也不建议任何人再做一个怪异模式的文档
，因为它造成的麻烦比解决它们的麻烦多。每种浏览器都有不同的怪癖模式，因此要使页面在各种浏览器中保持一致看起来要困难两个数量级。使用DOCTYPE。总是。最好是HTML5one-
<!DOCTYPE html>。它易于记忆，并且在所有浏览器（甚至10岁的浏览器）中都像魅力一样起作用。
唯一的例外是当您必须支持IE5之类的东西时。如果您在那里，那么无论如何您都是自己的。那些古老的浏览器与当今的浏览器完全不同，这里给出的建议很少会对您有所帮助。从好的方面来说，如果您在那里，则可能只需要支持一种浏览器即可解决兼容性问题。
祝好运！
更新2： 嘿，已经很久了！6年后，新的选择出现了。我刚刚在下面的评论中进行了讨论，这里有一些可以在当今浏览器中使用的技巧。
选项1- 绝对定位。当您知道第一部分的精确高度时，它非常干净。
body, html {width: 100%; height: 100%; margin: 0; padding: 0}.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }.second-row iframe {display: block; width: 100%; height: 100%; border: none;}<div > <p>Some text</p> <p>And some more text</p></div><div > <iframe src="https://jsfiddle.net/about"></iframe></div>一些注意事项-在
second-row需要的容器，因为
bottom: 0并
right:0没有在内部框架出于某种原因的工作。与“已替换”元素有关。但是
width: 100%，
height: 100%效果很好。
display:block是必需的，因为
inline默认情况下它是一个元素，否则空格会开始产生怪异的溢出。
选项2- 表格。当您不知道第一部分的高度时可以使用。您可以使用实际
<table>标签，也可以使用精美的标签
display:table。我将选择后者，因为这些天似乎很流行。
body, html {width: 100%; height: 100%; margin: 0; padding: 0}.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}.first-row {display: table-row; overflow: auto; background-color: lime;}.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}<div > <div > <p>Some text</p> <p>And some more text</p> </div> <div > <iframe src="https://jsfiddle.net/about"></iframe> </div></div>一些注意事项-
overflow: auto确保该行始终包含其所有内容。否则，浮动元素有时会溢出。在
height:100%第二行确保它扩展一样，因为它可以挤压第一排的小，因为它得到。
选项3 -flexbox。其中最干净的一种，但对浏览器的支持不足。IE10
-ms-的flexbox属性需要前缀，而其他任何东西都将根本不支持它。
body, html {width: 100%; height: 100%; margin: 0; padding: 0}.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}.first-row {background-color: lime; }.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }<div > <div > <p>Some text</p> <p>And some more text</p> </div> <iframe src="https://jsfiddle.net/about" ></iframe></div>一些注意事项-这
overflow: hidden是因为即使
display:block在这种情况下，iframe仍然会产生某种程度的溢出。在全屏视图或代码片段编辑器中看不到它，但是小的预览窗口有一个额外的滚动条。不知道那是什么，iframe很奇怪。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）