DIV 纯CSS 自适应屏幕高度三层(上，中，下)

最新推荐文章于 2023-11-04 18:58:10 发布

彬智vs酷

最新推荐文章于 2023-11-04 18:58:10 发布

阅读量820

点赞数

CC 4.0 BY-SA版权

分类专栏： DIV 文章标签：布局

本文链接：https://blog.youkuaiyun.com/hxcm_net/article/details/44618457

DIV 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用DIV和IFrame实现网页布局的方法，该方法可以替代传统的Frameset布局方式，通过绝对定位和固定高度来实现头部、主体及底部的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Div用iframe 替换Frameset的主页布局

    html,body{margin:0;padding:0;overflow: hidden; }
    html{_padding:108px 0 20px;}
    body{background-color:#FFF;font-size:12px;font-family:Verdana, Arial, Helvetica, Geneva, sans-serif;height:100%;overflow: hidden; }
    body{margin:0;padding:0;
   background-repeat: no-repeat;
    margin: 0;
         }
    .header{position:absolute;top:0;left:0;width:100%;height:108px;overflow: hidden;background-image: url(/Images/spm/page/Images/hy_top_bg.jpg);}
    .middle{position:absolute;top:108px;right:0;bottom:20px;left:0;overflow:hidden;width:100%;_height:100%;}
    .floor{position:absolute;bottom:0; _bottom:-1px;left:0;width:100%;height:20px;line-height: 20px;overflow: hidden; }
    .leftiframe{width: 100%;height:100%;border: none; }
    .rightiframe{width:100%;height: 100%;border: none;}
    .sidebar {position:absolute;top:0;left:0;bottom:0;overflow:hidden;width:230px;_height:100%;}
    .main-content {position:absolute;_position:static;top:0;right:0;bottom:0;left:230px;_height:100%;_margin-left:230px;}

</style>