Chúng tôi có thể xác định chiều cao tối thiểu 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 min-height không cho phép hộp nội dung của phần tử nhỏ hơn ngay cả khi chiều cao nhỏ hơn chiều cao tối thiểu.
Cú pháp
Cú pháp của thuộc tính min-height CSS như sau -
Selector {
min-height: /*value*/
} Ví dụ
Hãy xem một ví dụ cho thuộc tính chiều cao tối thiểu CSS -
<!DOCTYPE html>
<html>
<head>
<title>CSS min-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{
min-height:150px;
}
</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 minHeight</button>
</div>
<script>
function add() {
document.querySelector('#contentDiv').style.minHeight = "100px";
}
</script>
</body>
</html> Đầu ra
Sau đây là đầu ra cho đoạn mã trên -
Trước khi nhấp vào nút 'Đặt chiều cao tối thiểu' -
Sau khi nhấp vào nút 'Đặt chiều cao tối thiểu' -
Ví dụ
Hãy xem một ví dụ khác cho thuộc tính CSS min-height -
<!DOCTYPE html>
<html>
<head>
<title>CSS min-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;
}
#contentDiv1, #contentDiv2{
width:50%;
border: 2px solid black;
margin: 0 auto;
}
</style>
<body>
<div id="containerDiv">
<div id="contentDiv1">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</div>
<div id="contentDiv2">
This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy.
</div>
<button onclick="add()" class="btn">Set minHeight</button>
</div>
<script>
function add() {
document.querySelector('#contentDiv1').style.minHeight = "95px";
}
</script>
</body>
</html> Đầu ra
Sau đây là đầu ra cho đoạn mã trên -
Trước khi nhấp vào nút 'Đặt chiều cao tối thiểu' -
Sau khi nhấp vào nút 'Đặt chiều cao tối thiểu' -
