How to Install Operating System ??Complete Guide Installing The Operating System

How To Set Elements Height with CSS

If in the previous tutorial we discussed How to Set Elements Width with CSS, this time we will discuss How to Set Elements Height with CSS. The following properties will be discussed in this tutorial.

  • height property to determine the height of an element
  • min-height is used to determine the minimum height of an element
  • max-height is used to determine the maximum height of an element

We will discuss the properties above in detail so that they are easy to understand, you can prepare a text editor to start the practice of this tutorial.

Before going forward, there are a number of articles that you might be looking for.

Read Too :

How to Set Elements Height with CSS

To be able to set the height of an element we can use the properties above, well in this tutorial we will discuss first the height property, here is an example property height added with a border so that each corner of the element can be seen.

<style type = "text/css">
    .height {
        border: 1px solid #000;
        height: 300px;
     }
</style>

<div class = "height"> Sets the height of the element with css </div>

Following is the display of the code above …

Set the Height of Elements with CSS
Set the Height of Elements with CSS

Viewed the results of the 300-pixel height element will remain and will not change even though the browser is reduced, but it will be different if you use a percentage, because the percentage will adjust the width of the page.

Set the Minimum Height and Maximum Elements with CSS

An element height can be formed dynamically based on the minimum and maximum height constraints of an element, so to be able to set the minimum and maximum height of an HTML element that is by using the properties min-width and max-width.

<style type = "text/css">
    .height {
        border: 1px solid #000;
        min-height: 200px;
        max-height: 900px;
     }
</style>

<div class = "height"> Sets the minimum and maximum height of elements with css </div>

From the above code, it can be seen that the minimum height of an element has been set at 200px and a maximum height of 900px, then an element will not pass both values ​​if a browser is smaller or larger on a particular device.

The use of min and max is also usually used to set responsive pages that already support various types and sizes of devices used.

Before going forward, there are a number of articles that you might be looking for.

Read too :

Sending
User Review
0 (0 votes)

Add a Comment

Your email address will not be published. Required fields are marked *