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

Question

假设我有一个宽度为身体宽度50%的div.如何使其高度等于该值？因此,当浏览器窗口宽度为1000px时,div的高度和宽度均为500px.

Answer 1

这实际上只能用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>

根据自己的喜好调整百分比.这是一个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可以应用于子代.演示

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

视口单元的支持表

我在一篇关于缩放响应动画的CSS-Tricks文章中写过关于这种方法和其他文章的文章.