4

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

有人告诉我，要拥有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%on #viewer_wrapper，我也没有问题。但在 Firefox 和 IE 上，iframe 拒绝占据屏幕高度的 96%（我想要的）。我什至尝试过大量的 JS 修复，所有这些不仅会导致丑陋的代码，还会导致不良的副作用。

谢谢你的帮助。

4

4 回答 4

0

是的，它的父母需要有一个height，而不是一个min-height。

于 2013-03-01T07:59:21.737 回答
0

正如我刚刚了解你到底想要做什么，你可以使用这样的东西：

<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. 使用heightandoverflow: visible;代替。请注意，paddings 和margins 可能不同，因此请将它们设置为一个值（可能为 0）。

这也是height使body页面内容（例如背景）仅在首屏可见的原因。

于 2013-03-01T08:07:29.607 回答
0

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

相反，您将使用这样的最小/最大高度：

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

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

这是一个带有相对值的小提琴http://jsfiddle.net/zB2Za/ 和一个修复http://jsfiddle.net/zB2Za/2/的小提琴

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

于 2013-03-01T08:10:05.143 回答
0

在我看来，你想要做的是将你的#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;
}
于 2013-03-01T09:15:20.527 回答