css高度随内容自适应的问题。高度随内容变化。

html-css010

css高度随内容自适应的问题。高度随内容变化。,第1张

如果是div的话就用css里面的"min-height:300px"表示这个表格的最小高度是300像素，最大无限

如果是table的话，直接在内容td里面写一个<td height="300">就OK了。ps：300px是我举的例子，数值你自己改

两边如果要放内容的话 就用table

<table width="100%">

<tr>

<td>左边自适应</td>

<td width="100">中间固定宽度</td>

<td>右边自适应</td>

</tr>

</table>

如果只是加个背景的话 这样写就行

<div style="width:100%background:url(xxx) no-repeat center center">

<div style="width:100pxmargin:0 auto">中间固定宽度</div>

</div>

有些朋友在用css+div做站的时候，经常会碰到这样一个问题，某个框架在不同的浏览器下会变形或者位置错乱，这该怎么办呢？其实方法很简单，用以下代码就可以解决了：

<html>

<head>

<style>

#myTable{height:100%border:solid

1px

redwidth:100%}

#top{margin-top:1pxheight:100pxborder:solid

1px

green}

#down{margin-top:1pxheight:89%border:solid

1px

silver}

#left{height:100%border:solid

1px

blackmargin:1pxwidth:200pxfloat:left}

#right{border:solid

1px

#0aamargin:1pxheight:100%width:240pxoverflow:scroll

}

</style>

</head>

<body>

<table

id='myTable'>

<tr><td>

<div

id='top'></div>

<div

id='down'>

<div

id='left'></div>

<div

id='right'>

这里是内容

这里是内容容这里是内容

这里是内容

这里是内容

这里是内容

这里是内容

这里是内容这里是内容

这里这里是内容

这里是内容

这里是内容

这里是内容

这里是内容

这里是内容

这里是内容

这里是双线空间是内容

这里这里是内容

这里是内容

这里是内容

这里是内容

这里是内容

这里是内容这里是内容

这里是内容

这里是内容

这里是内容这里是内容

这里这里是内容

这里是内容

这里是内容

这里是内容

这里是内容

这里是内容容这里是内容

这里是内容

这里是内容这里是内容

这里这里是内容

这里是内容

这里是内容

这里是内容

这里是内容

这里是内容容这里是内容

</div>

</div>

</td>

</tr></table>

</body>

</html>