本文介绍了如何利用iframe和CSS实现一个左侧导航栏、右侧内容展示的页面布局。通过设置div的样式，如`height:100%`和`width:100%`，确保元素填充整个屏幕。利用`float:left`实现左右两栏并列，通过改变iframe的`name`属性来更新右侧的内容。
1.在jsp文件的<head>中加入：
<style>
html,body{margin:0px; height:100%;}</style>
才能使页面中的<div>设置height：100%起作用。100%是根据其父布局来确定的，所以必须确定父布局的高度。
而width：100%则可自动布满整个页面。
2.
<div id="main" style="width:100%;height:100%; ">
<div id="left" style="float:left;width:200px;height:100%;">
<a href ="userlist.do" target="frame"><li>用户管理</li></a>
<a href="" target="frame"><li>角色管理</li></a>
<a href="" target="frame"><li>权限管理</li></a>
</div>
<div id="right" style="height:100%;width:auto;margin-left:200px;">
<iframe id="iframe" name="frame" scrolling="no" frameborder="0" height="100%" width="100%"></iframe>
</div>
</div>
float:left 用于实现左右两个div并列。
更改iframe的src实现时，要注意是name属性，不是id属性。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
