html 实现网页单屏显示 满屏显示,不出现滚动条。

html-css014

html 实现网页单屏显示 满屏显示,不出现滚动条。,第1张

1、打开html开发工具,新建一个html代码页面,在html代码页面输入大量的文本内容,确保在浏览器上能有滚动条出现。

2、引入一个jquery.js库。在title标签后面创建一个script标签,然后引入jquery.js文件。

3、新建一个script标签,在这个标签里面创建使用$(window).scroll()监听滚动条滚动事件(案例中判断当滚动条滚动高度超过100的时候就出现一个弹出框)。

4、保存html代码后使用浏览器打开,然后滚动Y轴滚动条。

5、发现滚动到一定位置后会出现一个alert弹出框表示监听滚动条成功。

扩展资料  

HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。

HTML文本由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。

这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。

HTML其实是文本,它需要浏览器的解释,它的编辑器大体可以分为以下几种:

基本文本、文档编辑软件,使用微软自带的记事本或写字板都可以编写,WPS来编写,也可以。不过存盘时请使用htm或html作为扩展名,这样就方便浏览器认出直接解释执行了。

半所见即所得软件,如:FCK-Editer、E-webediter等在线网页编辑器;尤其推荐:Sublime Text代码编辑器(由Jon Skinner开发,Sublime Text2收费但可以无限期试用)。

所见即所得软件,使用最广泛的编辑器,完全可以一点不懂HTML的知识就可以做出网页,如:AMAYA(出品单位:万维网联盟)。

任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂,不利于大型网站的多人协作和精准定位等高级功能的实现。

方法1:直接在body里面加上属性scroll

代码如:

<

body

scroll=“no”

>

方法2:使用样式表overflow

代码如:

html{overflow:hidden;}-----我采用了这个,滚动条就消失了,最开始一直误以为是页面里面的div高度不当导致出现的滚动条。

在xhtml1-transitional.dtd标准下,并不是以body为容器,而是html标签,所以要把样式表加到html标签上才行,加到body上是不管用的。

你的问题和这个大同小异,不知道你看得懂下面代码不。一般来说设置成100%就可以了,我不知道你是不是有其他样式限制了这个宽度,这个最好检查下

近日做项目中用到页面中嵌套iframe,想要实现自适应大小,并且在IE中按F11键全屏时也可以自适应大小。

在网上搜来的代码多数只适应页面中只有单个iframe情况,但笔者页面还有一个logo图片。

经反复实现,如下代码可实现:

<html>  

<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html charset=UTF-8">  

<title>iframe全屏测试</title>  

<mce:style>

</mce:style><style mce_bogus="1">body { margin: 0px  }  

iframe {border: 0px}</style>  

</head>  

<mce:script type="text/javascript">

</mce:script>  

<body scroll="no">  

<img border="0" width="100%" height="84" src="./images/logo.png" mce_src="images/logo.png">  

<iframe id="frame3d" name="frame3d" frameborder="0" width="100%" scrolling="auto"  

    style="margin-top: -4px" onload="this.style.height=document.body.clientHeight-84"  

    height="100%" src="./map.jsp" mce_src="map.jsp"></iframe>   

</body>  

</html>

1、页面加载实现:iframe的onload事件,之所以减去84,是logo图片的高度,把这个位置给让出来。

2、全屏实现:window.onresize事件

document.getElementById('frame3d').style.height = document.body.clientHeight - 84+"px"