css - 如何将高度 px 转换为 % 以便我的页面在调整大小时响应？

Question

我正在使用最大宽度 980px 构建一个响应式网格，以将我的固定 PX 宽度转换为 %，但我不确定我必须做什么才能将 PX 中设置的高度也更新为 %。谁能建议如何实现这一目标？我尝试将高度设置为 max-height:300px; height:100% 但没有成功。

Js fiddle http://jsfiddle.net/5jJQk/

示例 CSS

#ctn{
  max-width: 980px; /* 960 */
  width:100%;
  margin: 0 auto;
  clear: left;
  background: #eee;
  padding: 10px;
}

.col{
  background: #b7b7b7;
  max-height: 300px;
  height: 100%;
  margin: 1.041666667%; /* 10/960 */
  float: left;
}

.four{
  width: 31.25%; /* 300/960 */
}

.eight{
  width: 64.583333333%; /* 620/960 */
}

.twelve{
  width: 97.916666667%; /* 940/960 */
  clear: left;
}

Answer 1

height 以百分比表示仅在父元素定义了高度时有效，或者它一直以百分比表示直到根元素。

看看添加时会发生什么

html, body, #ctn { height:100%; }

到你的 CSS。

但是，只有在非常特殊的情况下才需要定义高度。通常您希望 block 能够容纳其内容。