Responsive Design: Why Does Height Zero & Padding-Bottom Work for Making a Div Responsively Sized

Responsive Design: Why does height zero & padding-bottom work for making a div responsively sized?

The second element is positioned absolutely relative to is container. Which is positioned relative.

In CSS, percentage based padding is relative to the width of the element. That is what creates the square effect.

And is also why if you add the same size padding to all sides, all sides have the same percentage of padding. It is relative to one measurement (width) and NOT both width and height. that would cause the padding to be skewed if the the element was not square.

how do I give a div a responsive height

I know this is a little late to the party but you could use viewport units

From caniuse.com:

Viewport units: vw, vh, vmin, vmax - CR
Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

Support: http://caniuse.com/#feat=viewport-units

div {/* 25% of viewport */  height: 25vh;  width: 15rem;  background-color: #222;  color: #eee;  font-family: monospace;  padding: 2rem;}

<div>responsive height</div>

Responsively change div size keeping aspect ratio

You can do this using pure CSS; no JavaScript needed. This utilizes the (somewhat counterintuitive) fact that padding-top percentages are relative to the containing block's width. Here's an example:

.wrapper {  width: 50%;  /* whatever width you want */  display: inline-block;  position: relative;}.wrapper:after {  padding-top: 56.25%;  /* 16:9 ratio */  display: block;  content: '';}.main {  position: absolute;  top: 0;  bottom: 0;  right: 0;  left: 0;  /* fill parent */  background-color: deepskyblue;  /* let's see it! */  color: white;}

<div class="wrapper">  <div class="main">    This is your div with the specified aspect ratio.  </div></div>

Maintain the aspect ratio of a div with CSS

Just create a wrapper <div> with a percentage value for padding-bottom, like this:

.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

<div class="demoWrapper">
  <div></div>
</div>

Responsively resize div according to its background image height

Updated Answer

Testing the old answer

During testing I found out that the old approach (creating an image element on the fly to get its dimensions) only works on latest versions of Chrome, Safari and Firefox but not IE. Thus it's not a cross browser method.

What the OP really wants

In addition, as per the OP's comments below, I figured it out that the OP wants the <main> element to be 70% of height of the browser. But Once the width of the <main> element reaches the edges of the background image by resizing the window horizontally, the height <main> element should be reduced to remove the vertical gap between the background image.

(That vertical gap happens because of using contain value for the background image to keep the image inside of the box and keeping the aspect ratio).

Considering that, and our failure to get the dimensions of the background image on-the-fly with a large scale of web browsers, you'll end up with the following:

var main = $('#main'),
    imgwidth  = 500,  // Set the width/height of the background image manually
    imgHeight = 300,
    imgRatio  = imgHeight/imgwidth,
    mainHeight   = main.height();

$(window).resize(function() {
  var mainWidth  = main.width(),
      mainRatio  = mainHeight/mainWidth;

  // Compare ratio of the <main> element and the background image
  if (mainRatio >= imgRatio) {
    main.height(imgRatio * mainWidth);
  } else {
    main.height('70%');
  }
}).resize(); // Trigger the handler once the script is loaded

WORKING DEMO.

---

The old Answer ^{(Under a misconception)}

There's no pure CSS way to resize an element's dimensions according to its background-image.

You'll need to use JavaScript to achieve that. By using JavaScript we get the computed background-image and create an image element (using the background image) on the fly to get the dimensions of the background image

Here you go:

<div class="wrap">
    <main id="main"></main>
    <div>another div</div>
</div>

_{I've combined two #main and <main> elements to condense the markup in this particulat instance.}

jQuery version:

var
    main = $('#main'),
    imgSrc = main.css('background-image').slice(4, -1);

$('<img />')
    .attr('src', imgSrc)
    .on('load', function() {
        main.height(this.height);
    });

WORKING DEMO.

Responsive Div Height (Padding-Bottom Percent) Fraction of a Pixel

First off I highly recommend using CSS3's calc() function to solve such things...

* {
  box-sizing:border-box;
}
.large {
width:calc(100%/3 * 2);
padding-bottom:calc(100%/3 - 1px);
background:linear-gradient(to bottom right, #bbb, #aaa);
float:left;
}

.small {
width: calc(100%/6);
padding-bottom:calc(100%/6);
background:linear-gradient(to bottom right, #222, #333);
float:left;
}

This should fix your issues, try playing around with that '-1px' part, there might be an 1px gap somewhere...

CODEPEN: http://codepen.io/anon/pen/obboeg

Make padding responsive

Use percentage as a unit of measurement while making your website responsive. Pixels does not work if you want it to be responsive. If you use percentage, the measurement is taken with respect to the size of the screen. But if you use pixels, the padding remains the same for all sizes. Simply, alter your CSS as shown below:

#i-container{
        border: solid;
        border-color: rosybrown;
        padding-left: 12%;
        padding-top: 0.5%;
    }

Use your desired percentage.

Customize CSS to make div/iframe responsive full screen height

.embed-container{height:100vh;}

vh unit stands for percent of viewport(browser window) height. 100vh will give 100% of browser window height to the element. currently support for vh unit is limited(https://caniuse.com/#search=vh)

---

Related Topics