122

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

4

4 回答 4

149

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

于 2012-10-17T00:13:55.493 回答
32

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

将 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>

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

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

于 2012-04-08T12:41:10.530 回答
14 
<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;
}

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

于 2013-08-13T08:39:42.140 回答
10

我对此做了一个 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 文章中写了关于这种方法和其他方法的文章，你应该看看。

于 2014-11-05T14:23:32.423 回答