Question

我们说我有一个宽度为身体宽度50％的div。如何使其高度等于该值？因此，当浏览器窗口宽度为1000px时，div的高度和宽度均为500px。

Answer 1

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

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>

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

Answer 2

如果您愿意忍受一些限制和跨浏览器问题，可以使用纯CSS来完成。但是，使用Javascript可以轻松灵活地完成它。如果您需要纯CSS解决方案，请参阅其他答案。

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

$(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>

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

$(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>

Answer 3

<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;
}

为此，我认为您需要定义填充到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;
}

无论如何，这就是我如何使它工作，因为只是填充所有的周围它不会是一个正方形。

Answer 4

我为此制作了一个CSS方法，其大小由视口宽度决定，但最大值为视口高度的100％。它不需要box-sizing:border-box。如果不能使用伪元素，则可以将伪代码的CSS应用于子代。 Demo

.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

我在scaling responsive animations上的一篇CSS-Tricks文章中写过这个方法和其他文章，你应该查看。

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

4 个答案: