CSS 我可以根据基于百分比的宽度设置 div 的高度吗？

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

提问by HankSmackHood

Let's say I've got a div that has a width of 50% of the body. How do I make its height equal to that value? So that when the browser window is 1000px wide, the div's height and width are both 500px.

假设我有一个宽度为主体 50% 的 div。如何使其高度等于该值？这样当浏览器窗口宽度为 1000px 时，div 的高度和宽度都是 500px。

采纳答案by Hubro

This can be done with a CSS hack (see the other answers), but it can also be done very easily with JavaScript.

这可以通过 CSS hack 完成（请参阅其他答案），但也可以使用 JavaScript 轻松完成。

Set the div's width to (for example) 50%, use JavaScript to check its width, and then set the height accordingly. Here's a code example using jQuery:

将 div 的宽度设置为（例如）50%，使用 JavaScript 检查其宽度，然后相应地设置高度。这是一个使用 jQuery 的代码示例：

$(function() {
    var div = $('#dynamicheight');
    var width = div.width();
    
    div.css('height', width);
});

#dynamicheight
{
    width: 50%;
    
    /* Just for looks: */
    background-color: cornflowerblue;
    margin: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="dynamicheight"></div>

If you want the box to scale with the browser window on resize, move the code to a function and call it on the window resize event. Here's a demonstration of that too (view example full screen and resize browser window):

如果您希望框在调整大小时随浏览器窗口缩放，请将代码移动到一个函数并在窗口调整大小事件上调用它。这也是一个演示（查看示例全屏并调整浏览器窗口大小）：

$(window).ready(updateHeight);
$(window).resize(updateHeight);

function updateHeight()
{
    var div = $('#dynamicheight');
    var width = div.width();
    
    div.css('height', width);
}

#dynamicheight
{
    width: 50%;
    
    /* Just for looks: */
    background-color: cornflowerblue;
    margin: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="dynamicheight"></div>

回答by Fadi

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-boxCSS attribute:

这实际上可以只用 CSS 来完成，但 div 内的内容必须绝对定位。关键是使用填充作为百分比和box-sizing: border-boxCSS 属性：

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

根据您的喜好调整百分比。这是一个JSFiddle

回答by implum

<div><p>some unnecessary content</p></div>

div{
    border: 1px solid red;
    width: 40%;
    padding: 40%;
    box-sizing: border-box;
    position: relative;
}
p{
    position: absolute;
    top: 0;
    left: 0;
}

For this to work i think you need to define the padding to ex. top? like this:

为此，我认为您需要将填充定义为 ex。最佳？像这样：

<div><p>some unnecessary content</p></div>

div{
    border: 1px solid red;
    width: 40%;
    padding-top: 40%;
    box-sizing: border-box;
    position: relative;
}
p{
    position: absolute;
    top: 0;
    left: 0;
}

anyways, thats how i got it to work, since with just padding all arround it would not be a square.

无论如何，这就是我让它工作的方式，因为只要在周围填充它就不会是正方形。

回答by Zach Saucier

I made a CSS approach to this that is sized by the viewport width, but maxes out at 100% of the viewport height. It doesn't require box-sizing:border-box. If a pseudo element cannot be used, the pseudo-code's CSS can be applied to a child. Demo

我对此做了一个 CSS 方法，它的大小由视口宽度决定，但在视口高度的 100% 处最大化。它不需要box-sizing:border-box. 如果无法使用伪元素，则可以将伪代码的 CSS 应用于子元素。演示

.container {
  position: relative;
  max-width:100vh;
  max-height:100%;
  margin:0 auto;
  overflow: hidden;
}
.container:before {
  content: "";
  display: block;
  margin-top: 100%;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
}

Support table for viewport units

视口单位支持表

I wrote about this approach and others in a CSS-Tricks article on scaling responsive animationsthat you should check out.

我在一篇关于缩放响应式动画的 CSS-Tricks 文章中写到了这种方法和其他方法，你应该看看。