緊急の解決策: iframe フレームワークが 100% 表示できない問題_html/css

ディスカッションへの返信(解決策)

ホームページ

ウェブフロントエンド

htmlチュートリアル

緊急の解決策: iframe フレームワークが 100% 表示できない問題_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:45 AM

フレーム HTML iframe

Web ページを作成させてください
上部の div の高さは固定する必要があり、幅は 100% で、下に iframe フレームが配置されます
フレームの左側の div の幅が固定され、高さは 100%、右側の幅と高さは両方とも 100% 全画面表示になります。画面が小さく、右側に多くのコンテンツがある場合は、自動的にスクロールバーが表示されます。インターネットで高さに適合するものが見つからないのですが、どうすればよいですか?

何気なくテストしたフレームワーク、右側の内容のほんの一部しか表示されません、助けてください、ありがとうございます
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{font-size:12px; margin:0; padding:0;}body,html{width:100%; height:100%;}.menu{ float:left;width:165px;height:41px;line-height:41px;font-size:16px;font-weight:bold;text-align:center;cursor:pointer;border-right:1px solid #dfdfdf;}.content{width:100%;height:100%;}.contentframe{width:100%;height:100%;}</style></head><body>    <div style="width:100%; background:#CCCCCC; height:60px;">      <span class="menu menuBackground"><a href="1.htm" target="contentframe">栏目一</a></span>      <span class="menu"><a href="2.htm" target="contentframe">栏目二</a></span>      <span class="menu"><A href="3.htm" target="contentframe">栏目三</A></span>  </div> <div class="content" id="content" >     <iframe scrolling="no" frameborder="0" src="1.htm" class="contentframe" name="contentframe" id="contentframe"></iframe>  </div></body></html>

ログイン後にコピー

1.htm ページ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style><style>*{font-size:12px; margin:0; padding:0;}body,html{width:100%; height:100%;margin:0; padding:0;}.content{width:100%;height:100%;}.contentframe{width:100%;height:100%;}</style></head><body><div style="width:250px; height:100%; float:left; background:#99C">  <a href="2.htm" target="rightframe">fsdf</a><br />  <a href="3.htm" target="rightframe">fsfsafsa</a></div><div style=" float:left;  background:#960; height:100%; position:relative"> <div class="content" id="content" >  <iframe scrolling="no" frameborder="0" src="2.htm" class="contentframe" name="rightframe" id="rightframe"></iframe> </div></div></body></html>

ログイン後にコピー

2.htm ページ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style><style>*{font-size:12px; margin:0; padding:0;}body,html{width:100%; height:100%;margin:0; padding:0;}</style></head><body > <div style="height:100%; width:100%; background:#ccc;">2页面内容</div></body></html>

ログイン後にコピー

ディスカッションへの返信(解決策)

divの自動塗りつぶしはtdのそれと異なり、左が250、右が100%ではなく、自分でdivの幅を計算して設定する必要があります。対応する部門。

1.html をロードするときに、ブラウザの幅を決定してコンテンツを設定できます。簡単なコードは次のとおりです。詳細な互換性テストは行われていません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>Test</title>    <style>        body, html        {            width: 100%;            height: 100%;            margin: 0;            padding: 0;        }        .content        {            width: 100%;            height: 100%;        }        .contentframe        {            width: 100%;            height: 100%;        }    </style>    <script type="text/javascript">        function setContentWidth() {            document.getElementById("content").style.width = document.body.clientWidth - 250 + "px";        }    </script></head><body onload="setContentWidth();">    <div style="width: 250px; height: 100%; float: left; background: #99C">        <a href="2.htm" target="rightframe">fsdf</a><br />        <a href="3.htm" target="rightframe">fsfsafsa</a>    </div>    <div style="float: left; background: #960; height: 100%; position: relative">        <div class="content" id="content">            <iframe scrolling="no" frameborder="0" src="2.htm" class="contentframe" name="rightframe"                id="Iframe1"></iframe>        </div>    </div></body></html>

ログイン後にコピー

ありがとうございます、表示はできますが、右側のコンテンツが多いと余分な部分が隠れてしまう、つまり表示されなくなり、スクロールバーを全部引くことができなくなりますこれを解決する方法がわかりません。

2. HTML に iframe を配置します。コンテンツが多すぎる場合はスクロールするように設定すると問題ありません。

ありがとうございます、表示はできますが、右側のコンテンツが多いと余分な部分が隠れてしまい、つまり表示されなくなり、スクロールバーを最後まで引くことができません。これを解決する方法がわかりません。

間違っています。1.html iframe にあります

もう 1 つの提案は、index.htm 内のコンテンツの高さの 100% がボディの高さから継承されるべきであるということです。本文の最終的な高さは document.body.clientHeight + 60 まで拡張され、ブラウザの高さよりも大きくなります。そのため、右フレームのコンテンツがスクロールするかどうかに関係なく、ブラウザには常にスクロールバーが表示されます。

上記の幅の設定と同じ方法で、index.htm ページを変更し、読み込み時のコンテンツの高さを設定できます。同時に本文のスクロールバーを避けるために、overflow:hiddenを追加します。

ページ全体を整理するには、以下のコードを参照してください。

リーリー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。