8

iframeとその高さに関してはかなり多くの質問があります。似ているものもありますが、正しい答えは得られません。だから私の場合を説明させてください：

JSFiddle： http: //jsfiddle.net/AmVhK/3/show/
エディター： http： //jsfiddle.net/AmVhK/3/

2行のテーブルがあります。最初のものには、固定高のdiv#toolbarが含まれています。2行目には、iframeを保持するdivが含まれています。ツールバーdivの下の利用可能なスペースを取るためにiframeが必要です。

私が直面している問題は、IE標準モード（IE8 +をサポート）にあります。たとえば、ウィンドウの高さが1000ピクセル、ツールバーの高さが200ピクセルの場合、iframeの高さも1000ピクセルであるため、スクロールバーがあります。iframeの高さを（ページの高さ-ツールバーの高さ）にする必要があります。

CSSソリューションがあればいいのにと思います。JavaScriptを使用して利用可能な高さを取得し、それをiframeに設定するか、divを含むことは、私にとって最後の手段です:)

ツールバーまたはiframeを絶対位置に設定することも、私のユースケースでは機能しません。必要に応じてマークアップの変更はOKです（テーブルを削除したい場合）

私はすでに次のCSSを設定しています：

html, body {height: 100%}

それを実装するための良い解決策。

4

7 に答える 7

4

これがIE8とFF17でテストされたソリューションです

<!DOCTYPE html>
<html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - jsFiddle demo</title>

        <style type="text/css">
            *
            {
                border: 0;
                line-height: 0;
                margin: 0;
                padding: 0;
            }

            html,
            body
            {
                height: 100%;
            }

            #layout
            {
                position: relative;
                width: 100%;
                min-height: 100%;
                            overflow-y: hidden;

                background-color: green;
            }

            #toolbar
            {
                width: 100%;
                height: 200px;

                background-color: blue;
            }

            #content-wrapper
            {
                position: absolute;
                top: 200px;
                bottom: 0px;

                width: 100%;

                background-color: red;
            }

            #content
            {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="layout">
            <div id="toolbar">

            </div>
            <div id="content-wrapper">
                <iframe id="content" name="content" src="https://c9.io/" border="0"></iframe>
            </div>
        </div>
    </body>
</html>
于 2012-11-19T08:48:29.373 に答える
4

これが私の試みです。IE7で水平スクロールを望んでいるiframeに問題がありますが、レイアウトは良いです.IE7と戦うと自分の目を噛み砕きたくなるので、あきらめなければなりませんでした.誰かが拡大できることを願っています.ここから。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>iframelayout</title>
        <style>
            html, body {
                margin: 0;
                padding: 0;
                height: 100%;
            }

            div, iframe {
                margin: 0;
                padding: 0;
                border: 0;
            }

            .container {
                position: relative;
                width: 100%;
                height: 100%;
                background: #222;
            }

            .toolbar {
                height: 200px;
                background: #aaa;
            }

            .iframe-container {
                position: absolute;
                top: 200px;
                bottom: 0;
                width: 100%;
                background: #555;
                overflow-y: hidden;
            }

            .iframe-container iframe {
                position: absolute;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="toolbar">

            </div>
            <div class="iframe-container">
                <iframe src="https://c9.io/" frameborder="0">Your browser is kaput!</iframe>
            </div>
        </div>
    </body>
</html>
于 2012-11-19T08:39:01.217 に答える
3

これは、元の質問でツールバーの高さが固定されていることに言及しているのと同じくらいきれいです。最小限のコード、ラッパー要素やテーブルは不要、IE8+/Chrome/Fox 互換。

ただし、デールのソリューションのコメントでは、代わりにツールバーの高さが柔軟であり、iframe を調整するための要件について言及しています。追加の JS および/または恐ろしい CSS ハック。IE<=9 との互換性が必要ない場合は、CSS3 フレックスボックスを使用すれば可能です。

あなたが述べたように、ツールバーの柔軟な高さの理由はさまざまな状態のアニメーションであるため、以下のコードを使用してツールバーの高さと iframe padding-topを同時にアニメーション化し、ツールバーだけでなく目的の柔軟性を実現することをお勧めします身長。アニメーション自体以外に追加の JavaScript を必要としないため、唯一の「欠点」は、1 つではなく 2 つのプロパティをアニメーション化することです。残りのレイアウトは微調整されます。

<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
}
#toolbar {
    position: absolute;
    width: 100%;
    height: 200px; /* animate this */
}
#cblt_content {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 200px; /* and this */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 0;
}
</style>

<div id="toolbar">Toolbar</div>
<iframe id="cblt_content" src="https://c9.io/"></iframe>
于 2012-11-24T13:46:01.710 に答える
2

縦スクロールをなくす

このコードを使用すると、内側の ( iframe) スクロールのみが残ります。

html, body
{
    height:    100%;
    width:     100%;
    position: fixed;
}

ノート：

  1. widthが必要です ( と同様) absolute。
  2. absoluteあなたを助けないのは正しい。
  3. これは実際にあなたが達成しようとしていることにとって意味があります（私が正しく理解した場合）。

ブラウザのサポート:

少しバグがあるかもしれませんが、IE7 ( quirksmode ) でサポートされるはずです。

質問が正しかったことを願っています。

于 2012-11-25T05:13:23.743 に答える
1

解決策は

<!DOCTYPE html>
<html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - Webduos Demo</title>

        <style type="text/css">
            *{ border: 0;  line-height: 0;  margin: 0; padding: 0; }

            html, body {  height: 100%;  }

            #layout { position: relative; width: 100%; min-height: 100%; overflow-y: hidden; background-color: green; }

            #toolbar {  width: 100%;  height: 160px;  background-color: blue;  }

            #content-wrapper {  position:absolute;  top:180px; bottom: 0px; width: 100%; background-color: #0000dd;  }

            #content {width: 100%; height: 100%;  }
        </style>
    </head>
    <body>
        <div id="layout">
            <div id="toolbar">

            </div>
            <div id="content-wrapper">
                <iframe id="content" name="content" src="https://google.com/" border="0"></iframe>
            </div>
        </div>
    </body>
</html>
于 2012-11-24T07:13:57.750 に答える
0

親スクロールバーを非表示にして、必要なものを取得できると思います。単にoverflow-y hiddenを追加するだけのように:

html, body {
        height: 100%;
        overflow-y:hidden;
    }
于 2012-11-26T06:23:59.170 に答える
-1

これでできるはずです！クイック プレビュー リンクは次のとおりです: http://jsfiddle.net/AmVhK/15/show/

<style type="text/css">
    html, body {
        height: 100%;
    margin: 0;
    padding: 0;
    }
    #contentiframewrapper, #cblt_content {
    /* max-height: 100%;
    min-height: 99.9%;*/
    height: 99.9%;
    margin: 0;
    padding: 0;
    line-height: 0;
    }
    #toolbar {
        height: 100px !important;
        background-color: #CCC;
        text-align: center;
        font-size: 50px;
        vertical-align: middle;
    }
</style>
<table width="100%" height="99.6%" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td valign="top" id="toolbar">Toolbar
            </td>
        </tr>
        <tr>
            <td width="100%" valign="top" height="80.5%">
                <div align="center" id="contentiframewrapper">
                     <iframe width="100%" frameborder="0" name="cblt_content" id="cblt_content" src="https://c9.io/" border="0"></iframe>
                </div>
           </td>
    </tr>
    </tbody>
</table>​

Chrome と IE8 の両方でテストしましたが、私の側では動作します。IE8 の JSFiddle でバグが発生する可能性がありますが、別のページとして表示する場合 (通常の状態では) は発生しません。

編集: 元のコードに若干の変更を加えました。ただし、<td>ツールバーの高さを変更する場合は、iFrame の高さの値を保持する を新しい高さに変更する必要があります。IE には魔法の % 値はありません (もちろん望ましくない JS を使用しない限り)。それは試行錯誤にすぎません。

于 2012-11-20T23:44:53.193 に答える