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

あなたがやりたいことは、 #wrapper を2つに分割することのようです。

#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 に答える
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。代わりにheightandを使用してください。overflow: visible;また、paddings とmargins は異なる場合があるため、値 (0 の可能性あり) を設定してください。

また、height背景bodyなど、ページのコンテンツをスクロールせずにスクロールせずに見えるようにする理由もあります。

于 2013-03-01T08:07:29.607 に答える
0

min-height を 100% に設定しても意味がありません。

代わりに、次のように最小/最大の高さを使用します。

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

このように使用される相対的な高さ/幅は、コンテンツによって強制された場合にのみ、それらのサイズを占有します。つまり、コンテンツがコンテナを拡張しない限り、最小の高さを使用し、最大の高さの値まで拡張します。すでにほのめかした解決策は、固定の高さ、たとえば height:100% を設定することです。

これは、相対値のフィドルhttp://jsfiddle.net/zB2Za/ と修正のフィドルhttp://jsfiddle.net/zB2Za/2/です。

ページ コンテンツでページ全体を「埋める」場合は、本文のマージンとパディングを 0 に設定します。これは 2 番目のフィドルに表示されます。

于 2013-03-01T08:10:05.143 に答える