Question

我花了几个小时试图解决这个问题 - 所以是时候问了。

我被告知要有height: x%（高度为百分比）的东西，它的父母需要有一个高度，就像它的父母一样。

所以这是我的结构：

html
  body
    div#wrapper
      div#viewer_wrapper
        iframe#viewer

这里有一些适用的CSS：

html, body{
    height: 100%;
}
#wrapper{
    min-height: 100%; /*it's this that seems to trip me up - a fixed height works for the problem, but not for the layout obviously*/
    position: relative;
}
#viewer_wrapper {
    height: 100%;
    position: relative;
}
#viewer {
    width: 100%;
    height: 96%;
}

Chrome非常听话 - 即使没有height:100% #viewer_wrapper，我也没有问题。但是在Firefox和IE上，iframe拒绝占据屏幕高度的96％（我想要的）。我甚至尝试了大量的JS修复程序，所有这些修复程序不仅导致代码丑陋，而且导致不良副作用。

感谢您的帮助。

Answer 1

是的，其父母需要height，而不是min-height。

Answer 2

我刚才明白你想做什么，你可以使用这样的东西：

<div id="viewer_wrapper">
    <div id="top">Something on the top</div>
    <iframe></iframe>
</div>

和这个CSS：

#viewer_wrapper {
    position: absolute;
    z-index: 100;
    width: 100%;
    top: 200px; /* Some number that fits to the content on the top. */
    bottom: 0;
}

对我而言，它有效率，100％高度和96％高度。但一般情况下，最好不要使用min-height。请改用height和overflow: visible;。请注意，padding和margin可能不同，因此请将它们设置为值（可能为0）。

另外，height的{{1}}是使您的网页内容（如背景）仅在首屏上可见的原因。

Answer 3

没有必要将最小高度设置为100％，这没有任何意义。

相反，你会使用这样的最小/最大高度：

#wrapper{
    min-height:50%;max-height: 100%;
    position: relative;
}

这种方式使用的相对高度/宽度只会在内容强制使用时占用这些尺寸。即，除非内容物扩展容器，否则它们将占据最小高度，它将扩展到最大高度值。您已经提到的解决方案是设置固定高度，例如高度：100％。

这里有一个相对价值的小提琴，http://jsfiddle.net/zB2Za/ 并且修复了http://jsfiddle.net/zB2Za/2/

如果您希望页面内容“填充”整个页面，请将正文的边距和填充设置为0，这将在第二个小提示中显示。

Answer 4

在我看来，你想要做的就是把你的#wrapper分成两部分。

包含除#viewer_wrapper之外的所有内容的顶部应该具有自然高度。包含#viewer_wrapper的底部应该有高度：100％。

HTML

<div id="wrapper">
    ...
</div>
<div id="wrapper2">     
    <div id="viewer_wrapper">
        ...
    </div>
</div>

CSS

#wrapper2 { height:100%; }
#wrapper, #wrapper2 {
    width:70%;
    position:relative;
    padding:4px 10px;
    margin:0 auto;
    background:whiteSmoke;
    border-left:2px solid black;
    border-right:2px solid black;
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
    box-sizing:border-box;
}

为什么这个CSS不适用于Firefox？

4 个答案: