点击菜单通过iframe的src改变来显示不同的页面。iframe能高度自适应，iframe滚动但是不显示滚动条

最新推荐文章于 2024-07-24 10:26:30 发布

原创

最新推荐文章于 2024-07-24 10:26:30 发布 · 968 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在不使用框架的情况下，利用iframe实现菜单点击切换页面，并解决iframe高度自适应、宽度100%及内部滚动条显示问题。通过设置iframe的onload事件和调整CSS样式，实现了iframe内容的完美显示。

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

当我们不使用任何的框架来写官网，把几个不同的页面怎么能在菜单改变的时候放在一起呢？

顶部菜单和底部的一般是不变的。变得是中间的内容，那么我们考虑一个总的页面，含有不变的元素，然后变得内容通过iframe的src改变来实现。那么需要考虑下面的两个问题：

1.怎么让iframe能高度自适应，宽度占据100%；

页面的布局是这样的

<div class="head">

    <ul class="nav">
       <li class="layui-nav-item layui-this" attr-href="/https/blog.csdn.net/mainindex"><a href="#">首页</a></li>
       <li class="layui-nav-item" attr-href="/https/blog.csdn.net/profun"><a href="#">功能与服务</a> </li>
       <li class="layui-nav-item" attr-href="/https/blog.csdn.net/price"><a href="#">价格</a></li>
       <li class="layui-nav-item" attr-href="/https/blog.csdn.net/aboutus"><a href="#">关于我们</a></li>
    </ul>

</div>

   <div class="mainContent"&