Hi dear welcome to "CodePrime" Blog . In this post we are going to learn How to use | Min-Height | Max-Height. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min-Max height property in css by codeprime</title>
</head>
<body>
<div class="box">
Lorem ipsum dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt aperiam quas neque aliquid, a nulla aut nisi repudiandae fugit modi assumenda ratione facilis error voluptas alias, voluptatem vel rem non nihil id voluptate illo. Temporibus, asperiores quod, cum assumenda deleniti similique maxime aspernatur nostrum maiores corporis distinctio fuga! Cumque, quod a? Corrupti, cupiditate ipsum. Alias voluptate corrupti suscipit nobis? Fugit maxime possimus excepturi culpa eligendi labore rem accusantium, laboriosam qui.
</div>
</body>
</html>
CSS CODE
.box {
width: 500px;
border: 5px solid rgb(254, 2, 2);
padding: 5px;
font-size: 2rem;
min-height: 150px;
max-height: 400px;
overflow: scroll;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
0 Comments