项目中一些关于页面的布局的知识

最新推荐文章于 2024-09-06 11:26:45 发布

weixin_30847271

最新推荐文章于 2024-09-06 11:26:45 发布

阅读量87

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/haohaoday/archive/2012/11/30/2796280.html

版权

好就没有更新博客了，今天有空再写的东西吧，说说最近碰到的一些关于页面布局的小问题，总结一下。

一、经常用到height:100%去自适应高度，可是有的时候这个办法却不能成功，其实height:100%起作用是有个前提的，

就是node的parentNode必须要有固定的高度，子节点的height:100%才会有效果；

二、常见三栏布局，上中下，上下固定高度，中间自适应，之前我想到没想，自适应就用js处理好了，结构跟同行交流，原来css就可以做到的，唉，真的是丢人啊，自己动手写了一个，果然可以实现，基本原理是用height:100%;代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        html,body{height: 100%;padding: 0;margin: 0;}
        #top{background: red;border:1px solid #000000;position:absolute;top:0px;left:0px;height: 100px;width: 100%;}
        #content{background: green;border:1px solid #000000;margin-top: -100px;margin-bottom: -100px;height: 100%;}
        #foot{background: yellow;border:1px solid #000000;position: absolute;bottom: 0;left: 0;height:100px;width: 100%;}
    </style>
</head>
<body>
<div id="top"></div>
<div id="content"></div>
<div id="foot"></div>
<script type="text/javascript">
    window.onload=function(){
        alert(document.getElementById("content").offsetParent.clientWidth)
        alert(document.body.clientWidth)
    }
</script>
</body>
</html>

三、iframe的问题，iframe虽然提供了一些好处，但是不得不说iframe真不是个好东西，有这样的一个需求，就是页面里有一些iframe，这些iframe的内容应该自适应外面offsetParent的高度，所以我们希望通过页面加载完成获取iframe里页面的实际高度，然后再让设置这个iframe的offsetParent的高度。思路是这样的，

$("#iframeId").load(function(){
console.log(this.contentWindow.document.body.clientHeight)
})

一调试结构提示跨域，悲催的啊。可是放在服务器上运行，一切正常。崩掉了。为什么这样，偶也不知道，请高人指点了。

转载于:https://www.cnblogs.com/haohaoday/archive/2012/11/30/2796280.html

weixin_30847271

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目中一些关于页面的布局的知识

好就没有更新博客了，今天有空再写的东西吧，说说最近碰到的一些关于页面布局的小问题，总结一下。一、经常用到height:100%去自适应高度，可是有的时候这个办法却不能成功，其实height:100%起作用是有个前提的，就是node的parentNode必须要有固定的高度，子节点的height:100%才会有效果；二、常见三栏布局，上中下，上下固定高度，中间自适应，之前我想到没想，自适应...
复制链接

扫一扫