使用DIV代替Frame：
1.使用DIV的绝对定位样式：position:absolute;
2.指定上下左右的像素如：left:0px; top:0px; right:0px; height:70px;
3.如果想自适应屏幕的分辨率和窗口大小，则不要指定height和width属性值
2.2具体代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV_Frame</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none;}
html { height:100%; overflow:hidden; background:#fff;}
body { height:100%; overflow:hidden; background:#fff;}
div { background:#CCCCCC; line-height:1.6;}
.top { position:absolute; background-color: #FFFFCC; left:0px; top:0px; right:0px; height:70px;}
.side { position:absolute; background-color:#CCCCCC; left:0px; top:70px; bottom:0px; width:210px; overflow:auto;}
.main { position:absolute; left:210px; background-color:#99FFFF; top:70px; bottom:0px; right:0px; overflow:auto;}
</style>
</head>
<body>
<div class="top"> Your Logo.....<br/> TopMenu.....</div>
<div class="side">
Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>Left Menu<br/>
</div>
<div class="main">
自适应窗口大小，不指定高度，无需关注屏幕分辨率。<br />abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabc<br />
abc<br />abc<br />abc<br /><br /><br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />abc<br />
</div>
</body>
</html>
2.3说明：附件里我放了一个带缩进功能的样例，使用JQuery实现。
分享到：
相关推荐
另外，使用Service Worker和离线缓存策略可以实现离线访问和消息推送功能，提升用户体验。 最后，为了确保跨平台兼容性和响应式设计，项目可能会使用PostCSS和Autoprefixer来自动添加浏览器前缀，以及Bootstrap或...
0133 使用Frame3D过程在画布上创建3D效果 87 4.9 文件操作的相关函数 87 0134 使用CopyFile函数复制文件 87 0135 使用CreateDir函数创建一个目录 88 0136 使用FileCreate函数创建一个图形文件 88 0137 ...
0133 使用Frame3D过程在画布上创建3D效果 87 4.9 文件操作的相关函数 87 0134 使用CopyFile函数复制文件 87 0135 使用CreateDir函数创建一个目录 88 0136 使用FileCreate函数创建一个图形文件 88 0137 ...
1. **创建组件**：使用React的`React.Component`或者函数组件来封装各个部分，如`Header`（导航栏）、`Frame`（框架）、`Content`（主要内容）等。 2. **样式重构**：利用CSS或CSS-in-JS库（如styled-components）来...
{2.10.3}静态代码块}{62}{subsection.2.10.3} {2.11}\ttfamily final}{63}{section.2.11} {2.12}\ttfamily abstract}{63}{section.2.12} {2.13}\ttfamily interface}{64}{section.2.13} {2.14}JavaBean规范}{66...