iframe页面三层结构框架搭建

Posted 2020-10-01 dali_lyc

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="width: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>