1

私は問題に悩まされており、誰かが解決策を提供できることを願っています。同様の投稿を見つけましたが、SOに関する解決策はありません。以下は私のマークアップの小さなサンプルです

<div id="wrapper">
  <div id="content">
    Some text goes here
    <iframe src="http://www.reddit.com" height="100%" width="100%" />
  </div>
  <div id="footer"> footer text</div>
</div>

フィドルの例を見てください: http://jsfiddle.net/SaYAw/36/

私が達成しようとしているのは、ラッパー div がページの 100% を消費し、下に空白を残さないようにすることです。ラッパー div は、「コンテンツ」と iframe の両方に対応し、画面/ブラウザー ウィンドウのサイズが変化すると自動的に iframe の高さを調整します。これは非常に単純な作業のように思えますが、それを機能させる方法が見つかりません。私が見逃している可能性のあるものについて、他の誰かが考えを持っていますか? できれば純粋な CSS ソリューションを探しています。

4

2 に答える 2

1

クラスと ID を混同しないようにしてください。

'.'クラスは、CSSファイルにあるようなドットで始まります

しかし、あなたの HTML にはクラス セットがなく、ID です。'#'したがって、代わりにCSSを変更する必要があります

html, body
{
    height:100%;
    min-height:100%;
}
#wrapper
{
    border: 1px dotted #000;
    margin:5px;
    height:100%;
    min-height:100%;
}
#content
{
    border:1px solid #ccc;
    margin:5px;
    padding:5px;
    height:100%;
    min-height:100%;
}
#ifrContent
{
    height:100%;
    min-height:100%;
    overflow:scroll;
}

これがあなたが探していたものであることを願っています

于 2012-08-13T02:39:59.677 に答える
0

iframe を閉じていません。

<iframe src="http://www.reddit.com"
height="100%" width="100%"></iframe>
于 2012-08-13T15:54:47.837 に答える