Chúng tôi có thể xác định chiều cao tối đa cố định cho hộp nội dung của phần tử bằng cách sử dụng thuộc tính CSS max-height không cho phép hộp nội dung của phần tử cao hơn ngay cả khi chiều cao lớn hơn chiều cao tối đa.
Cú pháp
Cú pháp của thuộc tính CSS max-height như sau -
Selector {
max-height: /*value*/
} Hãy xem một ví dụ cho thuộc tính chiều cao tối đa CSS -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>CSS max-height Property</title>
</head>
<style>
* {
padding: 2px;
margin:5px;
}
button {
border-radius: 10px;
}
#containerDiv {
width:70%;
margin: 0 auto;
padding:20px;
background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
text-align: center;
border-radius: 10px;
}
#contentDiv{
max-height:50px;
overflow: hidden;
}
</style>
<body>
<div id="containerDiv">
<div id="contentDiv">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</div>
<button onclick="add()" class="btn">Set maxHeight</button>
</div>
<script>
function add() {
document.querySelector('#contentDiv').style.maxHeight = "100px";
}
</script>
</body>
</html> Đầu ra
Trước khi nhấp vào ‘Đặt maxHeight’ nút -
Sau khi nhấp vào ‘Đặt maxHeight’ nút -
Hãy xem một ví dụ khác cho thuộc tính CSS max-height -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>CSS max-height</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
#containerDiv {
margin: 0 auto;
max-height: 150px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS max-height</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/openshift/images/openshift-mini-logo.jpg">
</div>
</fieldset>
</form>
</body>
</html> Đầu ra
Trước khi chiều cao tối đa được xác định -
Sau khi chiều cao tối đa được xác định -
