div+css顶部固定问题和主容器中左侧容器宽度为200px、右侧内容的容器宽度为主容器减去200px的宽度

html-css026

div+css顶部固定问题和主容器中左侧容器宽度为200px、右侧内容的容器宽度为主容器减去200px的宽度,第1张

我知道了,你要做类似后台系统吧,宽度都能自适应屏幕,自适应分辨率的吧!

~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>

各个浏览器对于内边距,外边距还有边框是否算在高度里面是不同的,建议你下载一个火狐的firebug,选中元素后看布局里面有高度,ie7以上的浏览器也是自带查看工具的都是按F12键,都是看布局项。

在body{}内加入width:数值px

空间整体宽度

#main{width:740px!importanttext-align:center}

#main{width:80%!important}