zoukankan      html  css  js  c++  java
  • 项目中一些关于页面的布局的知识

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

    一、经常用到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)
    })

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

  • 相关阅读:
    河南六大学生程序设计竞赛--外国人饲喂站
    Basic脚本解释器移植到STM32
    C++ 建设者继承
    数据结构:Binary and other trees(数据结构,算法及应用(C++叙事描述语言)文章8章)
    POJ 2251-Dungeon Master(BFS)
    Python编程预约参观北京行动纲要
    debian防火墙firestarter
    debian清除无用的库文件(清理系统,洁癖专用)
    Linux(Debian) vps安装gnome桌面+VNC
    debian下Vnc
  • 原文地址:https://www.cnblogs.com/haohaoday/p/2796280.html
Copyright © 2011-2022 走看看