Question

在RWD网站设计页面上，我使用的每个盒子都有918px的高度，如何设置相同的高度？

如果我将高度设置为自动或100％它不起作用，如果我将高度固定为918px，则适用于桌面，但不适用于移动媒体。

.box{
    background-color:#0c71b8;
    height:100%;
    min-height:918px;   
    }

这些盒子的大小是960px X 918px，在那个盒子里我有图像和文本内容，背景颜色。那么我如何以百分比来固定高度？

Answer 1

.box的所有父元素都必须具有100％的高度，然后才能工作。

Answer 2

尝试以下两种解决方案。

jQuery - 动态查找窗口高度并在html元素上应用相同的高度。

function handleResize() {
  var hgt = $(window).height();
  $('.box').css({'height':hgt+'px'}); // HTML element names
}

$(function(){
  handleResize();

  $(window).resize(function(){
    handleResize();
  });
});

CSS - 制造绝对位置并制作顶级＆amp;底值零。

.box{
    position: absolute;
    top: 0;
    bottom: 0;
}

Answer 3

您需要使用所需高度（例如918px）将每个框包含父div，然后将框高度设置为100%。

UPDATED FIDDLE

编辑：

之前的演示不对。您还应该将overflow:auto添加到父div。

请参阅 new demo

如何在流体布局中修复高度？

3 个答案: