div/iframe自适应浏览器宽度高度问题

最近在做一个网页,要求网页首部使用固定像素高度,底部使用浏览器自适应高度,这样,就不能使用height:100%;的方法使网页保持浏览器自适应了,上网找解决方案,有很多,基本都是用JS实现的,既然如此,我也来一把呗:

 

    直接在网页中监听resize事件:window.addEventListener("resize", doResize);

div/iframe自适应浏览器宽度高度问题
function doResize()
{
    var frmDiv = document.getElementById("frameContainer");
    frmDiv.style.height = document.documentElement.clientHeight - thePx + "px";
}
div/iframe自适应浏览器宽度高度问题

 

    关键在于使用document.documentElement.clientHeight获取当前浏览器的高度,在减去特定固定像素高度即可控制高度自适应。

    到此扯一下题外话:一般来说,网页由三个部分组成,即:结构、表示和行为,结构化标准语言主要为XHTML或XML,表示标准语言主要为CSS,行为标准语言包括对象模型(如W3C DOM)、ECMAScript(JS是它的超集)。既然高度自适应是与表现直接相关的,那么直接用CSS来完成这件事情自然是名正言顺的了。

    好了,言归正传。使用CSS完成这件事情需要注意一下三点:

1、CSS Hack;

2、要使用100%高度自适应需要将父元素也设为100%;

3、使用以下代码进行控制

 

1
2
3
4
5
6
7
/*    保证frameCtn不超出边界的关键CSS代码 */
height: 100%;
/*    设定距离上下左右的具体像素大小          */
top: 84px;
right: 0;       
bottom: 0;  
left: 0;

div/iframe自适应浏览器宽度高度问题

上一篇:gzcms技术开发文档


下一篇:VS编辑器主题变换插件-EasyVS