假设我有一个宽度为身体 50% 的 div。如何使其高度等于该值?这样当浏览器窗口宽度为 1000px 时,div 的高度和宽度都是 500px。
问问题
171059 次
4 回答
149
这实际上可以只用 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
于 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 回答