如果可以不考虑IE67可以用display:table布局:
HTML:
<div class="outer"><div class="inner-title">
A
</div>
<div class="inner-content">
B
</div>
</div>
CSS:
.outer{background-color:blue
height:400px
display: table
width:100%
}
.inner-title{
background-color:#CCC
display:table-row
width:100%
height:100px
}
.inner-content{
background-color:#888
display:table-row
width:100%
}
IE6和IE7下估计只能用JS算高度了
原理:先给父级<div>设置宽度(像素)
然后再子<div>里,设置百分比,如图示。
代码原件:
<div style="width:80pxheight:50pxborder:#FF0000 3px solid"> <div style="width:20%height:50%border:#CC33FF 3px solid"></div> </div>
复制到<body></body>之间使用即可。
img{border:1px solid #CD171Adisplay:block}可以解决多出来的高度。
其他的,我没太看明白你说的什么意思。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)