html中div高度问题

html-css023

html中div高度问题,第1张

如果可以不考虑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>之间使用即可。

html div 高度不自动增加，这个问题的你要div自动增加，那么它必须要有height:auto；自增的这个属性的，还有你的上一级div高度已经设置了的话，这个div的高度到了，也不会增加了,这里我提交一段代码你可以看下，

html>

<head>

<style>

#div1{

height:auto

widht:400px

}

</style>

</head>

<body>

<div id='div1'>

<p>我只是一个测试的文字</p>

</div>

</body>

</html>