Question

我知道这已被问过很多次了，但是我一直试图让一个元素的％高度起作用。我的理解是如果父元素指定了高度，那么在子元素上设置％height应该有效。不幸的是，我试图让它工作，但我必须遗漏一些东西。

body{
  border-radius: 10;
  height: 100%;
  position: relative;
}

.child-element{
   height: 50%;
   margin: none;
   background-color: gray;
 }

我所拥有的地方：

<body>
  <div class="child-element">
  </div>
</body>

Answer 1

html标记的父元素body也需要设置height。

html {
    height: 100%;
}

下面的简化演示（删除了不必要的规则并重置了默认的身体边距）。

＆＃13;

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.child-element {
    height: 50%;
    background-color: gray;
}

＆＃13;

<body>
    <div class="child-element"></div>
</body>

＆＃13;

Answer 2

如果打算将可用的浏览器客户端区域显示为包含单个内容矩形（而不是具有滚动的高度矩形），我更愿意这样做：

body {
top: 0; left: 0; right: 0; bottom: 0;
overflow: hidden; position: overflow;
}

如果目标是让子面板从零开始构建高度，那么您需要注意对象的高度是基于父级的宽度，而不是当对象不是绝对位置或固定位置时的高度。可以按如下方式建立一个广场：

＆＃13;

.square {
 width: 20em;
    background: cyan;
}
.square:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    padding-top: 100%;
    float: left;
}
.square:after {
    content: '';
    display: block;
    clear: both;
}
}

＆＃13;

<div class="square">Square</div>

＆＃13;

您可以通过更改填充量来更改块的宽高比。

希望这有帮助。

标记

为什么百分比高度在我的CSS中不起作用？

2 个答案: