急求解：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>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to distinguish between closing a browser tab and closing the entire browser using JavaScript?
Apr 04, 2025 pm 10:21 PM
How to distinguish between closing tabs and closing entire browser using JavaScript on your browser? During the daily use of the browser, users may...
