CSS:
<style> .frame-header { position: fixed; top: 0; right: 0; left: 0; z-index: 11; min-width: 960px; height: 38px; border-top: 1px solid #333; border-bottom: 1px solid #333; background: #3B3B3B; _position: absolute; _width: 100%; } .frame-side { position: absolute; top: 40px; right: 0; bottom: 0; z-index: 2; width: 200px; border-left: 1px solid #DBDBDB; background: #F9F9F9; box-shadow: inset 2px 0 3px rgba(0, 0, 0, 0.05); _height: 100%; } .frame-contents { position: absolute; top: 40px; right: 201px; bottom: 0; left: 0; min-width: 760px; } .frame-contents iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } </style>
HTML:
<div class="frame-header">I'm the header.</div> <div class="frame-side">I'm the right-side.</div> <div class="frame-contents"> <iframe src="http://www.baidu.com" frameborder="0" ></iframe> </div>
主体 frame-contents内容自适应高宽,超出部分滚动显示。