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

html-css011

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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>图片滚动</title>

</head>

<body>

<style type="text/css">

<!--

#demo {

background: #FFF

overflow:hidden

border: 1px dashed #CCC

width: 500px

}

#demo img {

border: 3px solid #F2F2F2

}

#indemo {

float: left

width: 800%

}

#demo1 {

float: left

}

#demo2 {

float: left

}

-->

</style>

<div id="demo">

<div id="indemo">

<div id="demo1">

<a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s1.jpg" //可换成自己的图片

border="0" /></a>

<a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s2.jpg" //可换成自己的图片

border="0" /></a>

<a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s3.jpg" //可换成自己的图片

border="0" /></a>

<a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s4.jpg" //可换成自己的图片

border="0" /></a>

<a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s5.jpg" //可换成自己的图片

border="0" /></a>

<a href="#"><img src="http://www.codefans.net/jscss/demoimg/wall_s6.jpg" //可换成自己的图片

border="0" /></a>

</div>

<div id="demo2"></div>

</div>

</div>

<script>

<!--

var speed=10

var tab=document.getElementById("demo")

var tab1=document.getElementById("demo1")

var tab2=document.getElementById("demo2")

tab2.innerHTML=tab1.innerHTML

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

tab.onmouseover=function() {clearInterval(MyMar)}

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

-->

</script>

</body>

</html>