html iframeがウィンドウの下部に届かない

ヘッダー、メニュー、およびコンテンツセクションの3つの水平セクションを持つWebページを作成しようとしています。私の問題は、私がこれを行うと、下のiframeがブラウザのウィンドウの最下部に近づかないことです。誰かが私が間違っていることを教えてもらえるかどうかは疑問だ。html iframeがウィンドウの下部に届かない

<!DOCTYPE html> 
<html> 
<head> 
<style> </style> 
</head> 
<body> 
<iframe src="title.htm" width="100%" height=90 
    style=" position:absolute; 
      top:0; left:0; 
      border:1px solid grey;" 
    name="title_frame"> 
    <p>Your browser does not support iframes</p> 
</iframe> 
<iframe src="hmenu.htm" width="100%" height=70 
    style=" position:absolute; 
      top:90px; 
      left:0; 
      border:1px solid grey; 
      margin:0px 0px 0px 0px;" 
    name="hmenu_frame"> 
</iframe> 
<iframe src="startpage.htm" width="100%" height="100%" 
    style=" position:relative; 
      top:160px; 
      vertical-align:bottom; 
      border:1px solid grey;" 
    name="content_frame"> 
</iframe> 
</body> 
</html>

何のCSSが含まれていないがあります：私のHTMLは次のようになります。 Chromeを使用してプレビューしていて、最後のiframeの下部がウィンドウの半分ほど下にあります。私は、絶対位置を使用して、高さで遊んでみてみましたが、縦に並んだ：底を試しましたが、どれもうまくいかないようです。

出典

2016-10-31 user2766918

はない最良の方法...です。単に「

」タグを使用するのはなぜですか？ – andreas

ありがとうございます。私は前にセクションを聞いていなかった。私はちょうどクイックルックアップを行い、そのセクションはsrc属性をサポートしていないようです - メニューアイテムをクリックすると、セクション全体の内容をページ全体を再ロードせずにロードできますか？（メニューにいくつかのjavascriptがあるので、絶対に必要な場合を除き、再ロードしないことをお勧めします）。 – user2766918

さて、わかりました。セクションを使用すると、すべてのコードを1つのhtmlファイルで使用する必要があります。したがって、メニュー項目のクリックでセクションを1つだけ再ロードすることはできません。 iframeを使用することが悪い習慣であるかどうかについてこの質問を参照してください：http://stackoverflow.com/questions/362730/are-iframes-considered-bad-practice – andreas

あなたのアプローチをちょっと変えることをお勧めします。これはflexboxを使って簡単に実現できます。あなたの文脈でiframesを使用することは実際にはお勧めできません。結果はthis fiddleです。

最初に、iframeからとabsoluteの位置を削除します。彼らは必要ではありません。次にをbodyに設定します。国境を設定しているため（道路に多くのトラブルを避けることができるため）、iframeにはbox-sizing: border-box;を追加してください。ここで

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

body { 
    display: flex; 
    flex-direction: column; 
} 

iframe { 
    box-sizing: border-box; 
}

出典

2016-10-31 12:38:46

あなたは文脈のiframeが推薦されないと言った二番目の人です。それを拡大できますか？（申し訳ありませんが、私が言ったように、私はこれに新しいです、そして私が行くように学ぶ - 私は推論を理解したいと思います）。 – user2766918

'iframe'の使用に関する多くの情報がインターネット上にあります。あなたが聞く最も大きな問題はセキュリティです。もう一つの理由は、 "意味論"です。 @Andreasが 'sections'sをお勧めしている理由は、コンテンツを記述する最良の要素を使うようにしなければなりません。 'iframe'には"意味 "がなく、ページにコードが"注入 "されます。 –

はdisplay: flex;と<section>タグの代わりに、アイフレームを使用して、簡単なソリューションです。幅flex-direction: column;は、コンテンツセクションが連続して表示されているのではなく、上に表示されていることを確認します。

このようにすれば、マークアップやスタイルはきれいでシンプルなままで、すべてのポジショニングを行う必要はありません。別のページのセクションのためのiframeを使用して

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
section { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    border: 1px solid grey; 
 
} 
 
.title { 
 
    height: 90px; 
 
} 
 
.hmenu { 
 
    height: 70px; 
 
} 
 
.content { 
 
    height: 100%; 
 
}

<section class="title">...</section> 
 
<section class="hmenu">...</section> 
 
<section class="content">...</section>

出典

2016-10-31 12:44:21 andreas

html iframeがウィンドウの下部に届かない

答えて

関連する問題