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

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

 

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

function doResize()
{
    var frmDiv = document.getElementById("frameContainer");
    frmDiv.style.height = document.documentElement.clientHeight - thePx + "px";
}

 

    关键在于使用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 ;

 

转载于:https://www.cnblogs.com/ciangcic/p/3526910.html