Home >Web Front-end >HTML Tutorial >How to set div height in html
How to set div height in html
- 青灯夜游Original
- 2021-12-13 15:16:0811575browse
htmlHow to set the div height: 1. Add the "height: height value;" style to the div element to set a fixed height; 2. Add the "min-height: height value;" style to the div element to set the minimum height ;3. Add the "max-height: height value;" style to the div element to set the maximum height.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
htmlSet div height
1. Use the height attribute
height attribute to set the element high. (Note: The height attribute does not include padding, borders, or margins!)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
border: 1px solid red;
}
</style>
</head>
<body>
<div>默认div高度是由文本高度决定的</div>
<div style="height: 100px;">设置div宽度为100px</div>
</body>
</html>
2. Use the min-height attribute
min-height attribute sets the minimum height of the element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
border: 1px solid red;
}
</style>
</head>
<body>
<div>默认div高度是由文本高度决定的</div>
<div style="min-height: 100px;">
设置div最小高度为100px<br />
设置div最小高度为100px<br />
设置div最小高度为100px<br />
设置div最小高度为100px<br />
设置div最小高度为100px<br />
设置div最小高度为100px<br />
设置div最小高度为100px<br />
设置div最小高度为100px<br />
设置div最小高度为100px<br />
设置div最小高度为100px<br />
设置div最小高度为100px<br />
设置div最小高度为100px<br />
</div>
</body>
</html>When there is no content, or when the content height is less than 100, the height of the div is displayed at 100px;
3. Use the max-height attribute
max-height attribute to set the maximum height of the element .<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
border: 1px solid red;
}
</style>
</head>
<body>
<div>默认div高度是由文本高度决定的</div>
<div style="max-height: 100px;">
设置div最大高度为100px<br />
设置div最大高度为100px<br />
设置div最大高度为100px<br />
</div>
</body>
</html>
html video tutorial"
The above is the detailed content of How to set div height in html. For more information, please follow other related articles on the PHP Chinese website!