1、首先创建或者打开我们的web项目，新建一个html文件和css文件即可，如图所示。
2、html页面代码如图所示，定义一个div，然后给一个id属性即可。
3、这里是使用宽度的百分比之后，设置高度值为零，然后使用padding属性的top或者bottom的值（可以是任意百分比），背景颜色作为测试。
4、然后在浏览器运行之后的效果是这样的哦，放大缩小浏览器，宽高会随之改变。
5、这个方法是使用expression来设置高度即可。
div高度无法自适应内容两种解决办法：
首先要确保这个div是不是是display：inline-block。默认情况下，div是block。可能在设置某些css样式的时候更改了也不一定。
position不需要写，代码不存在什么不对齐，除非你的margin（外边距）或者padding（内边距）两边设置不一样，如果都不设置的话，肯定是auto，自动对齐的，因为div是内外边距的。
扩展资料：
DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。
提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。
“DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。
参考资料：div css-百度百科
有些朋友在用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>
