私が達成しようとしているのは、iframe内にスクロール可能な自動再サイズ可能なdivを持つことです。overflow-y inside iframe
iframeはdivと異なり、スクロール自体があるため、divのオーバーフロー-yプロパティは無視され、divの内容全体が表示されます。
最良の説明は、あなたが、私はCSS「のhtml、ボディ、フォームを追加したら http://www.alocet.com/VictorsTestFolder/Sample/Default.html
をクリックすることで閲覧できるサンプル、ある{高さ：100％;マージン：0PX;パディング：0PXを;} "IFrameのページには、ほとんど機能しましたが、残念ながら私は重複したスクロールバーを取り除くことができませんでした。
提案がありますか？
私は手足の外に出て、あなたが本当にJavaScriptなしでやりたいことをすることはできないと言います。
Divsはそのようには機能しません。彼らは通常、どこにでも流出し、必要に応じてオーバーフローします。 divの内容に応じてサイズを変更する唯一の方法（私は経験を話している）は、明示的な高さを与えることです。それ以外の場合は、コンテナから溢れ出すか、コンテナ自体がblock formatting contextの場合はコンテナのスクロールを開始します。
iframeは独自のコンテキストのようです。したがって、それを含むdivをコンパクトに保つには、明示的な高さを設定する必要があります。私が見る二つのオプション：インラインフレームに収まる一定の高さでページ全体のために含むdiv要素を作成し、その後
<iframe src="Default_files/IFrame2.htm?h=400"
：
あなたは、ページの高さを変更するには、サーバのパラメータを追加することができます。それの中のすべてが適切に流れるはずです。次に、多くのコンテンツを持つ可能性のあるdivを固定サイズに設定します。
もう1つの選択肢は、document.documentElement.clientWidthを使用して探している変数を正確に取得できるJavaScriptを使用することです。 See this article for more details。この場合でも、フレーム化されたページを固定された高さに設定することになります。
どちらの方法も簡単な回避策ですが、私はあなただけのCSSで望むことができないと確信しています。
3番目の例で何が間違っていますか？固定サイズのiframeがあり、内部にはスクロールバーがあります。
また、スクロールバーを持たない自動サイズ変更の場合は、スクロール可能なオートリサイズ可能なdivがどういう意味ですか？
それ以外の場合は、div内のdivを使用することをお勧めします。さらに多くのコントロールがあり、コンテンツは引き続き検索エンジンに表示されます。
はい、Ajaxや何らかのサーバーサイドインクルードを使用すると、コンテンツに外部ページを使用する "iframe"効果を与えることができます。 – fiiv
こんにちは、ありがとうございます。私はdivの高さがパーセントではなくピクセルで定義されているので、3番目の例は気に入らない。問題は私の実際のプロジェクトで、iframeのサイズを変更することができます。iframeが最初に定義した400ピクセルの代わりに200ピクセルになると、divコンテンツの一部が非表示になります。 –
スクロール可能で自動サイズ変更可能とは、次のことを意味します。IFrameの高さが400ピクセルの場合、divは400ピクセルを超えてはいけません。しかし、divの内容は400ピクセルに収まらないので、私はdivのスクロールバーを持っています（私のサンプルの3番目の例のように） –
onloadを実行する単純なjavascriptの実装は、私の問題を解決しました... ...部分的には、固定高さのdiv内にテーブルがあると、指定されたdivの高さを超えています...今この問題の解決策を見つける...
<!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 runat="server">
<style type="text/css">
html, body, form
{
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript" language="javascript">
window.onresize = doResize;
window.onload = doResize;
function doResize() {
document.getElementById("popupHeight").style.height = (window.innerHeight - 40) + 'px';
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="popupHeight">
Text before the div
<br />
<div runat="server" id="tblTabGroups" style="overflow-y: scroll; height: 100%;">
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
</div>
Text after the div
</div>
</form>
</body>
</html>
テーブルの場合、実装する必要があるソリューションは次のとおりです。http://www.oasections.com/articles/scrollabletable.html –
あなたの提案をお試しください。ありがとう！ –