Frame - HTML

1. HTML 页面框架

需求:

宽度:

最小宽度:1024px

一般宽度:填充浏览器

最大宽度:无

类型: 上下

 

 

 

 

主框架:

<!-- 用于W3C标准 十分重要 -->
<!DOCTYPE html>
<html>
    <head>
        <title>@ViewBag.Title - My Telerik MVC Application</title>
    </head>
    <body>
    </body>
</html>

 

HTML:

<body>
    <div class="div_top">
        <div class="div_head_right">
            
        </div>
    </div>
    <div class="div_main">
        <div class="div_left">
            <div class="div_menu">
              
            </div>
        </div>
        <div class="div_right">
            <div class="div_iframe">
                <iframe id='iframe_page' class="iframe_page" frameborder='0' scrolling="no"></iframe>
            </div>
        </div>
    </div>
    <!-- 用于消除 div_left 的 float 对于父容器的影响(无法撑开父容器) -->
    <div style='clear:both'></div>

    <div class="div_bottom">

    </div>
</body>

 

CSS:

/* ------------------- FRAME -------------------  */

/* <!DOCTYPE html> 标准下设置 min-height 时必须使用 height 先定义 */
html { height: 100%; width: 100%; } 
body { height: 100%; min-height: 100%; width: 100%; min-width:1024px; margin: 0px; }

/* ------------------- TOP -------------------  */

.div_top { height: 45px; width: 100%;  background-color: #2b3643; }

.div_head_right { float:right; width:auto; margin-top:4px; margin-right:10px; color:#a7a7a7; }
.div_head_right a{ color:white; }
.div_head_right ul { list-style:none; }
.div_head_right ul li { display:inline }
.div_head_right span { border:solid 1px gray; border-radius:4px; padding:3px; margin:3px; }
.div_head_right span:hover { cursor:pointer; }

/* ------------------- MAIN -------------------  */
.div_main { height: calc(100% - 45px - 30px); min-height: calc(100% - 45px - 30px);  width: 100%;  }

/* --------- LEFT ---------  */
.div_main > .div_left { height: auto; min-height: 100%; width: 190px; float: left; background-color: #364150;  }
.div_main > .div_left_hide{ height: auto; min-height: 100%; width: 30px; float: left; background-color: #364150; }
.div_main > .div_left > .div_menu {  }

.ul_menu{ margin:0px; padding:0px; list-style:none; }
.li_home{ height:50px !important; line-height:50px !important; text-align:center !important; padding-right:30px; border-bottom:solid 1px rgba(255, 255, 255, 0.12); }
.li_home > img{ vertical-align:middle; opacity:0.4; width:24px; height:26px; }
.li_head{ height:40px; line-height:40px; text-align:left; padding-left:20px; color:#b4bcc8; }

.li_items{}
.ul_item{ margin:0px; padding:0px; list-style:none; }
.li_item{ display:block; height:40px; line-height:40px; margin:0px; padding:0px; text-align: center; color:#b4bcc8; }

.li_head:hover, .li_item:hover{ background-color:#3e4b5c; cursor:default; }

.li_head_selected{ color:white; background-color:#1caf9a !important; }
.li_item_selected{ background-color:#3e4b5c; }

/* --------- RIGHT ---------  */
.div_main > .div_right { height:100%; min-height: 100%; width:auto; min-width: calc(100% - 200px); overflow:auto; }
.div_main > .div_right > .div_iframe{ height:99%; min-height:99%; margin:0px; padding:0px; }
.div_main > .div_right > .div_iframe > .iframe_page { width:100%; height:100%; min-height:100%; border:none; margin:0px; padding:0px; }

/* ------------------- BOTTOM -------------------  */
.div_bottom { height: 30px; width: 100%; background-color: #364150; }

 

 

JScript:

    $(function () {
        // iframe 自适应高度
        $("#iframe_page").load(function () {
            var mainheight = $(this).contents().find("body").height() + 30;
            // 拉伸 iframe 高度
            $(this).height(mainheight);
            // 直接扩充父容器, 用于同时拉伸在此父容器中的其他容器
            $(".div_main").height(mainheight + 3);
        })
    })

 

posted @ 2015-09-02 15:42  `Laimic  阅读(214)  评论(0)    收藏  举报