zoukankan      html  css  js  c++  java
  • iframe页面三层结构框架搭建

    iframe height设为100%,同时要使其所有父容器的height设为100%:

    <style type="text/css">
    html, body {   height: 100%;   } </style>

     头部导航固定:

    <div class="container-fluid">
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        </div>
    </div>

     中间(固定侧边导航+iframe页面):

    <div class="container-fluid" style="position: relative;height: 100%">
        <div class="row" style="height: 100%">
            <div class="col-md-2" style="height: 100%">
                <ul class="nav nav-pills nav-stacked navbar-default">
                    <li class="active">
                        <a href="${contextPath}/admin/index" target="contentframe">
                            <i class="glyphicon glyphicon-th-large"></i>首页
                </a> </li> <li> <a href="${contextPath}/admin/clientdetails" target="contentframe"> <i class="glyphicon glyphicon-th-list"></i>系统配置             </a> </li> </ul> </div> <div class="col-md-10" style="height: 100%"> <iframe frameborder="0" src="/admin/index" name="contentframe" style="100%;height:100%"> </iframe> </div> </div> </div>

     底部版权页固定:

    <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <div style="text-align: center;padding: 40px 0 30px 0;">
                <p>Copyright &copy; 2016-2017></span>版权所有</p>
            </div>
        </nav>
    </div>
  • 相关阅读:
    福大软工 · BETA 版冲刺前准备(团队)
    Alpha 事后诸葛亮(团队)
    Alpha 冲刺 (10/10)
    Alpha 冲刺 (9/10)
    Alpha 冲刺 (8/10)
    Alpha 冲刺 (7/10)
    Alpha 冲刺 (6/10)
    Alpha 冲刺 (5/10)
    Alpha 冲刺 (4/10)
    福大软工1816 · 团队现场编程实战(抽奖系统)
  • 原文地址:https://www.cnblogs.com/dali-lyc/p/7295830.html
Copyright © 2011-2022 走看看