本文旨在解决CSS布局中一个常见的问题：当元素的宽度和高度被设置为100%时，元素未能占据其父元素的全部空间。通过分析问题的根本原因，本文将提供详细的解决方案，并给出示例代码，帮助开发者理解并避免此类问题，确保元素能够按照预期占据可用空间。
在CSS布局中，我们经常需要让一个元素占据其父元素的全部宽度和高度，通常的做法是将元素的 width 和 height 属性设置为 100%。然而，有时即使这样设置，元素也可能无法完全占据父元素，这通常是由于 body 和 html 元素默认的 margin 和 padding 造成的。
问题分析
浏览器默认会给 body 元素添加一些 margin 值，这会导致 body 元素的内容区域（content area）小于其包含块（containing block，通常是 html 元素）。 当子元素（例如 div）的宽度和高度设置为 100% 时，它们会占据 body 元素内容区域的 100%，而不是整个 html 元素。
解决方案
要解决这个问题，我们需要重置 body 和 html 元素的 margin 和 padding 属性。 通过将这些属性设置为 0，我们可以确保 body 元素的内容区域与其包含块完全一致。
立即学习“前端免费学习笔记（深入）”；
以下是具体的CSS代码：
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
background-color: red;
}在这个例子中，我们首先将 html 和 body 元素的 width 和 height 设置为 100%，这确保它们占据浏览器窗口的全部空间。然后，我们将 margin 和 padding 都设置为 0，从而消除浏览器默认样式带来的影响。 最后，我们将 #container 元素的 width 和 height 设置为 100%，这样它就可以占据 body 元素的全部空间，显示为红色。
以下是HTML代码示例：
Full Height Container
总结
在CSS布局中，理解浏览器默认样式的影响至关重要。 body 和 html 元素默认的 margin 和 padding 是导致元素无法占据全部空间的常见原因。 通过重置这些属性，我们可以更精确地控制元素的布局，确保它们按照预期占据可用空间。 在实际开发中，建议使用CSS Reset或Normalize.css等工具来统一不同浏览器的默认样式，从而减少布局问题的发生。
