Can I set the height of a div based on a percentage-based width? [duplicate]

by

This can actually be done with only CSS, but the content inside the div must be absolutely positioned. The key is to use padding as a percentage and the box-sizing: border-box CSS attribute:

div {
  border: 1px solid red;
  width: 40%;
  padding: 40%;
  box-sizing: border-box;
  position: relative;
}
p {
  position: absolute;
  top: 0;
  left: 0;
}
<div>
  <p>Some unnecessary content.</p>
</div>

Adjust percentages to your liking. Here is a JSFiddle

More Related Contents:

  1. Working with CSS in React [closed]
  2. Canvas is stretched when using CSS but normal with “width” / “height” properties
  3. Browser can’t access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
  4. Override body style for content in an iframe
  5. Hiding the scroll bar on an HTML page
  6. CSS3 background image transition
  7. Understanding z-index stacking order
  8. Position Relative vs Absolute?
  9. Why does the order of media queries matter in CSS?
  10. Truncating long strings with CSS: feasible yet?
  11. CSS to set A4 paper size
  12. Remove padding from columns in Bootstrap 3
  13. How can I align one item right with flexbox?
  14. CSS “and” and “or”
  15. Using the last-child selector
  16. Separators for Navigation
  17. xHTML/CSS: How to make inner div get 100% width minus another div width
  18. How can I make generated content selectable?
  19. How to create multi-color border with CSS?
  20. Flexible box model – display : flex, box, flexbox? [duplicate]
  21. Suggestions for debugging print stylesheets?
  22. Twitter Bootstrap 3 – Panels of Equal Height in a Fluid Row
  23. IE and Edge fix for object-fit: cover;
  24. CSS select the first child from elements with particular attribute
  25. nth-child doesn’t respond to class selector [duplicate]
  26. Best replacement for font tag in html
  27. Is it acceptable to use tables for forms? Or is it still more correct to use divs?
  28. Two css files defining same class
  29. How to use variable in CSS? [duplicate]
  30. Latest on CSS parent selector [duplicate]

Leave a Comment