仿淘宝菜单分类页面布局--iframe框架有限替代方案

最新推荐文章于 2026-05-16 06:27:29 发布

原创最新推荐文章于 2026-05-16 06:27:29 发布 · 1.7k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在前端开发中替代iframe实现左右布局的方法，利用Bootstrap和自定义CSS实现美观且响应式的菜单布局，解决了iframe存在的样式冲突、加载速度慢等问题。

之前做一些类似后台管理界面，典型的左侧菜单、右侧布局，基本都采用iframe框架来完成

虽然iframe操作起来非常方便，但是也存在问题，例如页面不够美观，css样式布局会出现各种复杂问题以至于显得比较乱，以及像有些人说的加载慢、html部分代码重复加载等问题...

另外，在前端使用ifram框架感觉不太好；所以，一直想找一个替代解决方案，能够基本实现类似框架的布局，具体效果就像淘宝app上的菜单分类页面布局

通过各种尝试，最终找到完美实现的方法。

实现效果如下图，页面分为左右两部分，两边如有内容超出时，则出现滚动条，互不影响

实现思路：

1.结合bootstrap的“导航/滑动门”的模块进行修改，省得自己写标签页了，总之先做一个左侧菜单，右侧内容的标签页

2.实现滚动条的核心思路是，将左右两部分div的高度设定固定值，然后设置css样式使其内容超出时出现滚动条

3.确保页面美观，需要将div的高度设置为屏幕高度，在页面加载及大小变动时动态设置，使用js可以方式实现

具体实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link rel="stylesheet" href="style/lib/css/bootstrap.css">
    <title>Title</title>
</head>
<style type="text/css">
    body{
        margin: 0;
        padding: 0;
        background-color: #f8f9fa;
    }

    /*重写bootstrap的a标签默认样式*/
    a {
        color: #6c757d;
        text-decoration: none;
        background-color: transparent;
        font-size: 13px;
        text-align: center;
    }

    /*重写bootstrap菜单标签处于激活及显示时文字及背景样式*/
    .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link {
        color: #007bff;
        background-color: #f8f9fa;
    }
</style>

<body>
<div class="container-fluid fixed-top">
    <div class="row">
        <div class="col-2 bg-white p-0 m-0" id="pill-menus" style="overflow-y: auto;">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link rounded-0 active" data-toggle="pill" href="#v-pills">女装</a>
                <a class="nav-link rounded-0" data-toggle="pill" href="#v-pills">男装</a>
                <a class="nav-link rounded-0" data-toggle="pill" href="#v-pills">鞋子</a>
                <a class="nav-link rounded-0" data-toggle="pill" href="#v-pills">帽子</a>
                .............

            </div>
        </div>
        <div class="col-10 bg-light p-2 pr-3">
            <div class="tab-content" id="v-pills-tabContent" style="overflow-y: auto;">
                <div class="tab-pane fade show active" id="v-pills" role="tabpanel" aria-labelledby="v-pills-home-tab">
                    <p style="height: 200px; border: solid 1px #0C9A9A;">sdfds</p>
                    <p style="height: 200px; border: solid 1px #0C9A9A;">sdfds</p>
                    <p style="height: 200px; border: solid 1px #0C9A9A;">sdfds</p>
                    <p style="height: 200px; border: solid 1px #0C9A9A;">sdfds</p>
                    <p style="height: 200px; border: solid 1px #0C9A9A;">sdfds</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script src="style/lib/js/jquery.js"></script>
<script src="style/lib/js/bootstrap.bundle.js"></script>
<script src="style/js/index.js"></script>
<script>

    // 页面加载以及大小变化时动态设置div高度
    window.onload=window.onresize=function () {
        document.getElementById("pill-menus").style.height=document.documentElement.clientHeight+'px';
        document.getElementById("v-pills-tabContent").style.height=document.documentElement.clientHeight-20+'px';
    }

</script>
</html>