Utilizing the max-height AND min-height attributes in CSS (or with jQuery)

Question

Utilizing the max-height AND min-height attributes in CSS (or with jQuery)

I am facing a simple yet frustrating issue. I am trying to specify both the minimum and maximum height of a div element.

For instance: setting min-height to 100px and max-height to 200px. Initially, the div is loaded with a height of 200px. However, when I resize my browser window, the div adjusts accordingly but stops resizing once it reaches a height of 100px.

It seems that using min-height and max-height in CSS is not achieving the desired effect. :/

Any advice or solutions would be greatly appreciated.

Thank you.

html css xhtml

Answer 1

Answer №1

Don't forget to include height.

min-height: 150px;
max-height: 250px;
height: auto;

Answer 2

Don't forget to include height.

min-height: 150px;
max-height: 250px;
height: auto;

Answer 3

Answer №2

When it comes to setting the height of an element, min-height takes precedence over both height and max-height, making it impossible to use them simultaneously.

One workaround for this issue is utilizing media queries. For example, if your HTML looks like this:

<div id="myDiv"></div>

You can add the following CSS code:

#myDiv{
    height:200px;    
}
@media screen and (max-height: 200px) {
    #myDiv {
        height:99vh; /*Adjust based on trial and error, taking into account your margins*/
    }
}
@media screen and (max-height: 100px) {
    #myDiv {
        height:100px;
    }
}

Answer 4

When it comes to setting the height of an element, min-height takes precedence over both height and max-height, making it impossible to use them simultaneously.

One workaround for this issue is utilizing media queries. For example, if your HTML looks like this:

<div id="myDiv"></div>

You can add the following CSS code:

#myDiv{
    height:200px;    
}
@media screen and (max-height: 200px) {
    #myDiv {
        height:99vh; /*Adjust based on trial and error, taking into account your margins*/
    }
}
@media screen and (max-height: 100px) {
    #myDiv {
        height:100px;
    }
}

Answer 5

Answer №3

Experiment with

min-height: 100px;
max-height: 200px;
height: 100vh;

Answer 6

Experiment with

min-height: 100px;
max-height: 200px;
height: 100vh;

Answer 7

Answer №4

Simply employ the following CSS to set the height of an element to 100% of the viewport height: height: 100vh; and ensure that it dynamically adjusts based on content with min-height: fit-content;

Answer 8

Simply employ the following CSS to set the height of an element to 100% of the viewport height: height: 100vh; and ensure that it dynamically adjusts based on content with min-height: fit-content;

Utilizing the max-height AND min-height attributes in CSS (or with jQuery)

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to rotate a symbol around its center without the need to specify its position on two separate occasions

What is the best way to position a div vertically on the right side of another div?

The box-shadow feature seems to be disabled or ineffective when trying to send HTML content via

Adaptable Semantic UI form design

What could be causing my background image to resize while scrolling on mobile devices?

Adding a new .row in Angular based on an ngFor condition

Utilize JavaScript to implement CSS using an "if" statement

A step-by-step guide to designing a sidebar with navigation menus, including dropdown options for select menu items

Scroll within the inner container

"Reconfigure web page layout to be perfectly centered

"Submitting an HTML form and displaying the response without redirecting to a

Having troubles with the background in AngularJS? Experiencing a significant space between the background and footer? And resizing images is not making

Can you please provide me with detailed instructions on how to use the radio button?

Converting Selenium Webdriver Xpath value to CSS: A Step-by-Step

Limit the input text to only numerical values and require a minimum length of 10 characters for phone numbers

Why is my CSS causing a div with 100% width to be slightly taller than expected?

What is the best way to trigger a PHP function using a button click event?

The feature was implemented to make the delete button visible on the row only when the user hovers over it

How can you utilize CSS to automatically generate section numbers, specifically for multiple sections?

Change the background color of a checkbox with jQuery by toggling it