Question

使用基于百分比的宽度和高度计算的两个矩形div不会出现在我身上。以下是正文中的所有HTML：

<div class="brd"></div>
<img src="res/logo-art.png" alt="Logo Artwork" align="middle" width="100%">
<button class="btn btn-default" id="login">Login</button>
<button class="btn btn-default" id="register">Register</button>
<div class="brd"></div>

这是CSS：

.brd {
    position: relative;
    width: 100%;
    height: calc(50% - 315px);
    background: #606060;
}

页面的高度是854px，所以我计算出每个div的高度为112px。 png图像的高度为475px。检查员显示每个div的高度为0px。

Answer 1

即使没有计算，这也行不通。为了表示屏幕百分比的高度，最好使用＆＃34; vh＆＃34;单位（视口高度）：

.brd {
    position: relative;
    width: 100%;
    height: calc(50vh - 315px);
    background: #606060;
}

http://codepen.io/1GR3/pen/amLKVG

Answer 2

有时我发现div元素的基于百分比的宽度和高度不起作用。我过去通过给我所有div的父亲一个css宽度/高度来修复它。因此，如果您的div.brd是body的儿子，请执行：

html, body {
  width: {some_value};
  height: {some_value};
}

应该这样做。

Answer 3

.brd {
    position: relative;
    width: 100%;
    height: calc(50% - 315px);
    background: #606060;
    height: -moz-calc(50% - 315px);
    height: -webkit-calc(50% - 315px);
}

Try this. It works

使用基于百分比的宽度和高度计算的矩形div不显示

3 个答案: