height: 100%

超越～and me

于 2024-07-01 16:48:04 发布

阅读量370

点赞数 13

分类专栏： html基础文章标签： css 前端

本文链接：https://blog.csdn.net/2301_78986604/article/details/140105063

版权

56 篇文章 0 订阅

订阅专栏

在CSS中，height: 100% 的用法是希望某个元素的高度能够占据其父元素高度的100%。然而，要使 height: 100% 能够正常工作，有一些前提条件需要满足：

父元素的高度必须被定义：如果父元素的高度没有被明确设置（例如，它默认为 auto），那么子元素的 height: 100% 将不会按预期工作。你需要确保父元素有一个具体的高度值（如 px、em、rem、vh 等）或百分比高度（但请注意，这将再次依赖于其父元素的高度）。
在HTML文档流中：height: 100% 主要在HTML文档流中的块级元素上有效。如果你尝试在一个非块级元素（如 inline 或 inline-block）上使用它，可能不会得到预期的结果。
考虑padding和border：默认情况下，height: 100% 会考虑子元素的padding，但不会考虑border和margin。如果你希望包括border和padding在内的高度为100%，你可能需要使用 box-sizing: border-box;。
在绝对定位或固定定位的元素中：如果你在一个绝对定位（position: absolute;）或固定定位（position: fixed;）的元素上使用 height: 100%，那么这个百分比会基于最近的已定位祖先元素（即设置了 position 属性且值不是 static 的元素）的高度。如果没有这样的祖先元素，那么它会基于初始包含块（通常是视口）的高度。

示例：

	`<!DOCTYPE html>`
	`<html lang="en">`
	`<head>`
	`<meta charset="UTF-8">`
	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`<style>`
	`html, body {`
	`height: 100%;`
	`margin: 0;`
	`}`
	`.container {`
	`height: 100%;`
	`background-color: lightblue;`
	`}`
	`.inner {`
	`height: 100%;`
	`background-color: lightgreen;`
	`box-sizing: border-box;`
	`padding: 20px;`
	`border: 1px solid black;`
	`}`
	`</style>`
	`</head>`
	`<body>`

	`<div class="container">`
	`<div class="inner">`
	`This div will be 100% height of its parent container.`
	`</div>`
	`</div>`

	`</body>`
	`</html>`