数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济
心理学
社会研究
时装研究
法律研究如何使用 CSS 拉伸元素以适应浏览器窗口的整个高度？
要拉伸元素以适应 Web 浏览器窗口的整个高度，请使用高度属性并将其设置为 100%。同等的高度：100% 也已设置为整个网页。让我们看看如何拉伸元素以适应浏览器窗口的整个高度。
设置容器
我们将设置 <div>。这将拉伸到 Web 浏览器窗口的整个高度和宽度 −
<div class="fullHeight">This div element will stretch to the whole height and width of the window</div>
HTML 文档的高度
使用高度属性将网页设置为高度 100% −
html, body {
height: 100%;
margin: 0;
}
容器的高度
容器 div 也设置为高度 100%。这是将被拉伸以适应整个窗口高度的元素，因为文档也设置为高度 100% −
.fullHeight{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
background: rgb(135, 27, 207);
color:white;
font-size: 40px;
padding: 40px;
}
示例
要拉伸元素以使用 CSS 适应浏览器窗口的整个高度，代码如下 −
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
*{
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
.fullHeight{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
background: rgb(135, 27, 207);
color:white;
font-size: 40px;
padding: 40px;
}
</style>
</head>
<body>
<div class="fullHeight">This div element will stretch to the whole height and width of the window</div>
</body>
</html>
更新于：2023 年 12 月 21 日
1K+ 浏览
广告