可以使用javsscript来实现
假设div的名字是layout
<div id="layout">...</div>
function autozize(){
var para = document.getElementById("layout")
var width = document.body.clientWidth
if width <= 1000
para.style.width = 980px
else
para.style.width = 98%
}
para.style.fontSize = "2em"
}
我知道了,你要做类似后台系统吧,宽度都能自适应屏幕,自适应分辨率的吧!
~OK,好吧!
上面回答的都没用,不带那样玩的~我经常做这个!有点小复杂,全用DIV中间内容部分IE7不行,所以得用TABLE内嵌!
<html xmlns="http://www.w3.org/1999/xhtml&quot>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>自适应</title>
<style type="text/css">
html {height:100%max-height:100%padding:0margin:0border:0background:#eef0effont-size:76%overflow:hidden}
body{height:100%max-height:100% border:0overflow:hidden background:#fff padding:0}
/*lay
--------------*/
#content{
position:absolute
overflow:hidden
z-index:3
top:106px
left:0
width:100%
bottom:28px
bottom:28px\9
background:#ddd
}
*html #content {
top:0
height:100%
max-height:100%
width:100%
overflow:hidden
position:absolute
z-index:3
border-top:106px solid #fff
border-bottom:28px solid #fff
}
#header{
position:absolute
margin:0
top:0
left:0
display:block
width:100%
height:106px
line-height:106px
background:#333
z-index:5
overflow:hidden
color:#fff
text-align:center
}
#footer{
position:absolute
margin:0
bottom:0
left:0
display:block
width:100%
height:28px
line-height:28px
text-align:center
z-index:5
overflow:hidden
color:#fff
background:#333
}
/*中间表格*/
.main_tab{
width:100%
height:100%
}
.main_tab td{
padding:0px
margin:0px
vertical-align:top
height:100%
max-height:100%
}
.main_tab td.td_left{
width:181px
background:#00CCFF
}
.main_tab td.td_close{
padding:0px
width:8px
vertical-align:middle
background:#ff0000
font-size:12px
overflow:hidden
}
</style>
</head>
<body>
<div id="header"><h1>顶部</h1></div>
<div id="content">
<table cellpadding="0" cellpadding="0" border="0" class="main_tab">
<tr>
<td class="td_left">
<div class="menu_column">
<div class="title"></div>
<div class="menu_con">
<div class="lef_nav">
左边
</div>
</div>
</div> <!--左边菜单 end-->
</td>
<td class="td_close">▶</td>
<td>
内容<br />兼容IE6、7、8,火狐,谷歌!
</td>
</tr>
</table>
</div>
<div id="footer">底部</div>
</body>
</html>