CSS height
CSS height
此CSS属性设置元素的高度，它不包括padding边距、边框区域内的高度。它可以接受长度和百分比值。但是它不允许负值。
我们将高度设置为数字值（例如px，％等），如果内容不适合给定的高度，则内容可能会溢出。我们可以通过定义
overflow 属性来管理溢出内容。
overflow 属性来管理溢出内容。
如果未明确定义容器的高度，并且元素没有绝对定位（即
position：absolute; ），将
height 属性的值设置为
auto 。 min-height和max-height属性还可用于控制大小。
position：absolute; ），将
height 属性的值设置为
auto 。 min-height和max-height属性还可用于控制大小。
语法
height: auto | length | initial | inherit;
属性值
此属性的值列表如下。
| 值 | 说明 |
| auto | 这是默认值。浏览器负责使用此值来计算元素的高度。不允许使用负值。 |
| length | 它使用px，cm，pt等长度单位指定元素的高度。不允许使用负值。 |
| ％ | 以％定义容器的高度。不允许使用负值。 |
| initial | 用于将属性设置为其默认值。 |
| inherit | 它用于从其父元素继承属性。 |
我们通过一些示例来更清楚地了解这些属性。
示例
在这里，我们使用关键字值
auto 以及height属性的长度值，以
px 和
em 。
auto 以及height属性的长度值，以
px 和
em 。
<!DOCTYPE html>
<html>
<head>
<style>
#auto{
height: auto;
width: 275px;
border: 2px solid blue;
}
#px{
height: 320px;
width: 275px;
border: 2px solid blue;
}
#em{
height: 16em;
width: 275px;
border: 2px solid blue;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h2> height:auto; </h2>
<div id ="auto">
<img src="../uploads/html/rose.jpg">
<p> Welcome to the bianchenghao6.com </p>
<p> 此div元素的高度设置为auto。 </p>
</div>
<h2> height: 320px; </h2>
<div id ="px">
<img src="../uploads/html/rose.jpg">
<p> Welcome to the bianchenghao6.com </p>
<p> 此div元素的高度设置为320px。 </p>
</div><br>
<h2> height: 16em; </h2>
<div id ="em">
<img src="../uploads/html/rose.jpg">
<p> Welcome to the bianchenghao6.com </p>
<p> 此div元素的高度设置为16em。 </p>
</div>
</body>
</html>
输出
示例
在这里，我们以百分比指定
height 属性的值。
height 属性的值。
<!DOCTYPE html>
<html>
<head>
<style>
#per{
position: absolute;
width: auto;
height: 65%;
border: 2px solid blue;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h2> height: 65%; </h2>
<div id ="per">
<img src="../uploads/html/rose.jpg">
<p> Welcome to the bianchenghao6.com </p>
<p> The height this div element is set to 65%. </p>
</div>
</body>
</html>
输出
