css 两列 高度自适应 |htmlcss静态页面

在实现这种布局时，CSS中的浮动和清除浮动、position属性以及inline-block属性等都有着重要的作用。下面是一种实现两列自适应布局的方法：

<div class="wrapper">
<div class="left">
/* 这里写左侧列的内容 */
</div>
<div class="right">
/* 这里写右侧列的内容 */
</div>
<div></div>
</div>
/* CSS 代码 */
.wrapper {
width: 100%;
overflow: hidden;
}
.left {
width: 70%;
float: left;
}
.right {
width: 30%;
float: left;
height: 100%;
background-color: #ddd;
}

在上述代码中，大家使用了一个名为“wrapper”的div包含了左右两个div，同时在wrapper中添加了一个“clear:both”的div，以清除浮动。其中，左侧列使用了浮动，而右侧列则在高度100%的情况下使用了浮动。

以上就是一种实现两列自适应布局的方法，当然还有其他的方法，如使用flex布局。以上方法只是提供了一种思路。