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

Question

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

Js 小提琴 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。

但是，仅在非常特殊的情况下才需要定义高度。通常，您希望块适应其内容。

Answer 2

我会研究媒体查询，它们在转换时效果很好。

http://mediaqueri.es/

http://css-tricks.com/css-media-queries/

http://www.w3.org/TR/css3-mediaqueries/

我希望这有帮助。