在CSS中定义一个容器!

html-css014

在CSS中定义一个容器!,第1张

这个还真有点麻烦的.. CSS3出现前 仅仅在css中定义已经无法达到你的要求

可以使用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>