Set min-height equal to width

min-height css responsive
div min-height not working
css width equal to height
min-height not working in firefox
css reset min-height
css table min-height
w3 css min height
min-height scroll css

I have a fluid width div which is within another block-level element.

HTML

<div></div>

CSS

div {
    width:50%;
    min-height: /*equal to width */;
}

I want the min-height set equal to the width so that it is a square shape unless there is too much content. At that point, it should expand vertically. Can this be achieved with CSS?

What I've tried:

  • Using percentage paddings or margins, but this only sets height, not max--height and pushes the content down.

Because padding is relative to an elements width, you can use a pseudo element to force a min height by using padding-top: 100%;:

div {
  float: left;
  margin: 10px;
  width: 25%;
  background: lightGreen;
  position: relative;
}

div:before {
  content: "";
  display: block;
  padding-top: 100%;
  float: left;
}
<div></div>

<div>
  div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content.
  div with content. div with content. div with content. div with content. div with content. div with content.
</div>

<div>
  div with content. div with content.
</div>

CSS min-height Property, Set the minimum height of a <p> element to 200 pixels: p.ex1 { min-height: The min-height property defines the minimum height of an element. If the content is  Min Height. When setting the value of min-height, its benefit lies in preventing the used value for height property from becoming less than the specified value for min-height. Note that the default value for min-height is auto, which resolves to 0. Let’s take an example to demonstrate a simple use case. We have a section with a description text.

One option would be to use viewport percentage units. In this case, 50vw is 50% of the viewport. If the div is a root element and its width is relative to the viewport, then this work work as expected. You would otherwise have to calculate the height relative to the viewport for this to work.

For example:

div {
  width: 50vw;
  min-height: 50vw;
  background: #000;
}
<div></div>

How To - Aspect Ratio / Height Equal to Width, How To - Height Equal to Width. Step 1) Add HTML: Use a container element, like <div>, and if you want text inside of it, add a child element:  The aspect ratio of an element describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century), and 16:9 (universal for HD television and European digital television, and default for YouTube videos).

Based on @Turnip's answer, here's what I ended up using this:

/* Maintain Height While Loading Trick */
figure {
  background: #999;
  width: 100%;
  overflow: hidden;
  line-height: 1;
}
figure:before {
  content: "";
  display: block;
  padding-top: 100%;
  float: left;
}

/* some other CSS that's probably in your project already */
div {
  max-width: 25%;
  margin: 10px;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
<div>
  <figure>
    <img src="https://picsum.photos/4000/4000" alt="">
  </figure>
</div>

<h1>Some stuff below the image. Is it jumpy?</h1>

min-height, The min-height property in CSS is used to set the minimum height of a specified element. The min-height property always overrides both height  The min-height property defines the minimum height of an element. If the content is smaller than the minimum height, the minimum height will be applied. If the content is larger than the minimum height, the min-height property has no effect. Note: This prevents the value of the height property from becoming smaller than min-height.

min-height, The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller  You can make 50% width fit if you set all of your styles just right (no border, padding, etc.). You can make a three-column section using similar code, but use three tables set to 32% width instead. When the responsive code kicks in, we’ll want to make these content blocks 100% width for phones so that they fill the whole screen.

min-height · WebPlatform Docs, Sets the minimum height for an element. If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Height is based on the content*/ .without-min-height, .with-min-height { width: 100px; } /*Max height  CSS Setting height and width. The height and width properties are used to set the height and width of an element. The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

Min and Max Width/Height in CSS, Tags List; Buttons; Setting Min Width/Height to Zero With Flexbox; Mixing The minimum size of a flex item is equal to the size of its contents. body { min-height: 100%; margin: 0; padding: 0; background-color: #FFCC00; } html { height: 100%; } This will ensure your body element's size grows along with the content inside it. If you have no content in your body element, the body will take up all the space available to it anyway.

Comments
  • Is your div contained in the viewport (top level) or is some other block-level element?
  • It's within a block level element which has a max-width set so that it gets smaller if the viewport width is less than the max-width.
  • Oh, nice. I tried this but the pseudo element added extra space in the div with content. I see adding the float prevents that issue. I'll accept this when it lets me!
  • In case anyone uses this with a flexbox child, then you have to set display: flex; also on the wrapping element so that the height is inherited by the flexbox child.
  • Sorry, I've updated my question to include the information that this div is within a block level element, so it's width will not necessarily be the same as the viewport.
  • @kthornbloom It may be possible to use calc() to calculate the value.