css 背景颜色自动延伸

html-css013

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>

最简单的方法:(缺点不兼容老版本的ie)

<fieldset>

<legend>标题</legend>

<p>内容</p>

</fieldset>

====================

方法2:

<div style="border:1px solid #666height:100pxwidth:300pxposition:relative">

<h3 style=" background:#FFFdisplay:blockheight:20pxwidth:50pxposition:absoluteleft:10pxtop:-30pxtext-align:center">标题</h3>

<p>内容</p>

</div>

注:设置position:absolute并控制坐标(left、top)将标题调整到理想位置,设置白色背景挡住边框模拟出效果