DEV Community

AKSH DESAI
AKSH DESAI

Posted on

1

CSS Min-height & Max-height Tutorial

10. 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 Height and Max Height</title>

  <style>
    #first {
      width: 700px;
      min-height: 100px;
      max-height: 200px;
      border: 2px solid red;
    }
  </style>
</head>

<body>

  <h1> Yahoo Baba. CSS Min-Height and Max-Height </h1>

  <div id="first">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero quasi quod numquam veritatis sequi facilis aperiam ipsam ea quia maxime?
  </div>
</body>

<script>
  document.getElementById("first").contentEditable = 'true'
</script>

</html>
Enter fullscreen mode Exit fullscreen mode

Output
Output

Thank You.
You can follow us on:
Youtube
Instagram

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more