zoukankan      html  css  js  c++  java
  • 转载,元素高度自适应

    何为高度自适应?

    高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容。高度自适应不像宽度自适应那样简单,在兼容浏览器方面也稍微复杂一些。

    <!DOCTYPE html>
    <html>
    <head>
    <title>高度自适应布局</title>
    <style>
    html,body{ height:100%;}
    body,div{ margin:0; padding:0; color:#F00;}
    * html{ padding-top:100px;}/*for ie6*/
    .top{ background:#36C; height:100px;}
    * html .top{ background:#36C; height:100px; position:absolute; top:0; width:100%;}/*for ie6*/
    .main{ background:#F90; position:absolute; width:100%;  top:100px; bottom:0; overflow:auto;}
    * html .main{ background:#F90; position:static; height:100%;}/*for ie6*/
    </style>
    </head>
    <body>
    <div class="top">我是top,固定高度</div>
    <div class="main">
    <div style="height:100%;">我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签</div>
    </div>
    <div style="height:100px; background-color:red;"></div>
    </body>
    </html>

    效果

    有时候不是我们失去了目标,而是失去了方向。
  • 相关阅读:
    Unity3D 利用C#实现简单的代理模式Delegate(委托)
    代码删除文件夹,小心资源管理器报错,甚至崩溃【原】
    如何解决“应用程序并行配置不正确”问题?【原】
    STL,ATL,WTL的联系与区别
    C++虚函数表解析(转)
    学各国语言的网站大全
    The 500 Most Commonly Used Words in the English Language
    Top 100 English Verbs
    Top 100 words for advanced learners.
    TOP 100 MISSPELT/MISSPELLED WORDS IN ENGLISH
  • 原文地址:https://www.cnblogs.com/871735097-/p/4760840.html
Copyright © 2011-2022 走看看