我能否根据基于百分比的宽度设置 div 的高度？

Question

我能否根据基于百分比的宽度设置 div 的高度？

css

145

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

- HankSmackHood

这不能直接使用CSS完成。不过，使用JavaScript的解决方案很简单。 - Ben Lee

7

可以只使用CSS来实现。请参考Fadi的回答。 - Adam Waite

另一种方法，也适用于根据高度设置宽度（不像填充方法），可以在这里找到。 - Kevin Wheeler

这不是链接问题的副本。这个问题特别询问基于高度而不是宽度来确定正方形 - 这是一个非常不同的问题。 - Sandy Gifford

纯JS方法：el=document.getElementById('id_div') el.style.height=el.offsetWidth+"px" 这将给你一个完美的正方形。当页面加载时，让你的JS文件执行这段代码-- window.onload。 - Aseem

假设问题中的div宽度100%等同于100vw，为什么不直接使用vw？有什么好的理由吗？ - John Miller

4个回答

37

这可以通过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>

- Hubro

31

你不需要使用 JavaScript 来实现这个。你可以按照下面的方式进行设置：高度：0像素；宽度：40%；内边距顶部：40%； - Chris Andersson

如上所述，使用JavaScript是完全不必要的，并且会出现FOUC等问题，甚至更糟的是禁用JS（什么也不会发生）。请使用CSS方法。 - Bill

1

@Billy：“完全没有必要”？你忘记了下面的CSS方法有一些严格的限制。只有启用JavaScript的情况下，JavaScript方法才能在所有场景中起作用。 - Hubro

@Hubro “严格限制”？ - Bill

@Billy：乍一看，这个div似乎需要设置宽度和绝对定位的内容。此外，查看评论，结果似乎在不同浏览器之间有所不同。 - Hubro

OP特别说明他想要一个具有固定宽度的div，其高度应反映出这一点。最受欢迎的答案（即使没有使用box-sizing：border-box）仅使用标准CSS，并且将在任何地方都起作用。不过，对于FF问题暂无评论.. :P - Bill

15

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

我认为要使这个有效，您需要定义填充到例如顶部。像这样:

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

无论如何，那就是我让它工作的方式，因为只有填充周围所有内容不能得到一个正方形。

- implum

谢谢！上面的答案确实呈现了一个正方形，但它并不是其父元素宽度的40%。 - TrtG

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文章中介绍了这种方法和其他方法，可以查看缩放响应动画。

- Zach Saucier

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fadi · Accepted Answer

这实际上可以仅使用 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示例。