Css Min Height

What is Min Height in CSS?

It is min-height property that is being used to set the smallest height to an element. As the element is already defined, this property is utilized to make sure the element is at least a particular height.

Particularly, this feature is leveraged to expand containers which change depending on content.

Basic Usage:

This example sets the minimum height of a div element to 100 pixels. If the content inside the div is less than 100 pixels in height, the div will expand to meet the minimum height.

                          
                            div {
                                min-height: 100px; /* Set the minimum height of the div to 100 pixels */
                            }

Responsive Min Height:

This example sets the minimum height of a section to 50% of the viewport height, creating a responsive design.

                          
                            section {
                                min-height: 50vh; /* Set the minimum height to 50% of the viewport height */
                            }

Min Height for a Container:

This sets the minimum height for a container. The container will expand to at least 200 pixels, adjusting based on content if needed.

                          
                            .container {
                                min-height: 200px; /* Set the minimum height of a container to 200 pixels */
                            }

Min Height with Flexbox:

This example sets the minimum height for a flex container and allows flex items to grow and shrink within that limit.

                          
                            .container {
                                display: flex;
                                min-height: 300px; /* Set the minimum height of the flex container */
                            }
                            
                            .item {
                                flex: 1; /* Allow flex items to grow and shrink */
                            }

Responsive Min Height with Media Query:

This example uses a media query to set a different minimum height for the header based on the screen width.

                          
                            header {
                                min-height: 100px; /* Default minimum height for the header */
                            }
                            
                            @media screen and (min-width: 768px) {
                                header {
                                    min-height: 150px; /* Adjust the minimum height for larger screens */
                                }
                            }

Min Height with Overflow:

As a consequence, this defines a minimum height for a div and makes a scrollbar appear if the content stretched inside the div goes beyond the minimum height.

                          
                            div {
                                min-height: 200px; /* Set the minimum height of the div to 200 pixels */
                                overflow: auto; /* Add a scrollbar if the content exceeds the minimum height */
                            }