📌  相关文章
📜  如何从 100% vh - 90 px 减去 (1)

📅  最后修改于: 2023-12-03 15:08:13.562000             🧑  作者: Mango

如何从 100% vh - 90 px 减去

在前端开发中，有时需要从视窗高度减去一定的像素值。一般可以采用css的calc()函数来做到这一点。

CSS calc() 函数

calc() 函数允许在数学表达式中使用加减乘除等运算符，能够方便地计算出最终的样式值。

举个例子，如果要从视窗高度减去90像素，可以这样写：

height: calc(100vh - 90px);

其中100vh表示视窗高度的百分比，-表示减去，90px表示要减去的像素值。

兼容性

calc() 函数是CSS3的一个功能，但是它的浏览器兼容性非常好，现在基本可以放心使用。

示例代码

以下是一段示例代码，演示了如何将一个元素的高度设为视窗高度减去90像素：

<!DOCTYPE html>
<html>
<head>
	<title>示例代码</title>
	<style type="text/css">
		.container {
			height: calc(100vh - 90px);
			background-color: #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.content {
			font-size: 24px;
			font-weight: bold;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="content">这是一个示例内容</div>
	</div>
</body>
</html>

以上代码将会创建一个居中的容器，高度设为视窗高度减去90像素，容器内有一个居中的文本内容。

总结

使用calc()函数可以方便地计算出样式值，很多情况下可以避免使用JavaScript来进行样式计算，从而提高网页性能。