css 背景颜色自动延伸

html-css011

css 背景颜色自动延伸,第1张

<div>

<div>Left</div>

<div>Right</div>

</div>

纯css的:如果left宽度固定的话(比如:200px),就给外面那个大div弄个宽200px的背景图,只在y方向一直重复

要是left宽度不固定或者你愿意用javascript,就用js取得两个div,判断高度,让矮的那个高度等于高的那个:

<div id="left">Left</div>

<div id="right">Right</div>

<script>

function sameH(el1,el2) {

var a = document.getElementById(el1)

var b = document.getElementById(el2)

if (a &&b) {

if (a.scrollHeight <b.scrollHeight) {

a.style.height = b.scrollHeight + "px"

}

else {

b.style.height = a.scrollHeight + "px"

}

}

else {

alert("sameH函数需要的对象id不存在或创建在函数运行之后") }

}

sameH("left","right")//传入你的两个div的id

</script>

用css3动画去做

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>00</title>

<style>

.xian{ width:50px height:1px background:#000000 margin-top:100px}

.xian{animation: myfirst 5s}

@keyframes myfirst

{

from {width: 50px}

to {width: 1000px}

}

</style>

</head>

<body>

<div class="xian"></div>

</body>

</html>

低版本浏览器不支持css3属性,用谷歌什么的高版本浏览器看。