急求解：iframe框架不能100%显示问题_html/css_WEB-ITnose
框架 HTML iframe
请问我做一网页需要顶部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应有的宽度然后给相应的div设置。
你的1.html在load的时候判断一下浏览器的宽度，给content设置就行，简单的code如下，没有做详细的兼容性测试。
<!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的scrolling设成yes就应该可以了，里面的内容太多就会滚动了。
谢谢，是可以显示的，但是右边内容多的话，超出部分都会被隐藏掉也就是不显示，拉滚动条也不能到底，这不知道怎么解决，
错了，是1.html中的iframe
还有一个建议，index.htm中的content的高度的100%继承的应该是body的高度，因此body的最终高度被撑到了document.body.clientHeight + 60，大于浏览器高度，因此不管右边frame里面的内容滚不滚，浏览器会一直有滚动条。
和上面的设置宽度的做法一样，可以改动index.htm页面，在load时content设一个高度。 同时为了避免body的滚动条，再加上overflow:hidden。
可以参考下面的code，这样整个页面也整洁一些。
<!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> <script type="text/javascript"> function setContentHeight() { document.getElementById("content").style.height = document.body.clientHeight - 60 + "px"; }</script></head><body onload="setContentHeight();" style="overflow: hidden;"> <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>
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
