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。

但是，只有在非常具体的情况下才需要定义高度。通常，您希望块能够适应其内容。

Answer 2

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

http://mediaqueri.es/

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

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

我希望这会有所帮助。

如何将高度px转换为％，以便我的页面响应调整大小？

2 个答案: