CSS布局 - 混合绝对和浮动定位

Question

我有这个基本的CSS布局：

CSS

左栏

Box沿着左侧页面的长度运行。

width:16.5%, position:absolute; top:20px; left:1.5%;

它包含两个内部盒子，全宽，一个在另一个下面浮动。

主体（右栏）

这不是浮动的：

width: 82%;
margin-left: 18%;

原理

我在主体中使用了很多浮动div布局，这些布局经常需要像<div style="clear:both"></div>这样的clearfix元素（为了方便起见，内联显示的样式）。

这些clearfix元素与我原来的浮动左列相混淆，所以我通过使左列绝对来做出响应。这样，我可以清楚，但我需要在主体中进行主要布局。

问题

左列+主体包含在具有可见背景的包装中。

当Left Column中的项目数量变大时，左列增长，可以在包装器下方拉伸。我需要阻止这种情况发生。

从根本上说，我是否可以回到float:left左栏，以便我的明确修正可以适用于浮动内容？

Answer 1

很难说没有代码，但这里有一些理由......对于左栏来说，使用绝对位置是糟糕的选择，因为你的明确修复不起作用（可能你不是这样做的）对）。左列，因为它具有绝对位置，并不真正包含在该包装器中（它是从渲染流程中取出的），这就是为什么它会覆盖它。您可以使用小JavaScript 来扩展该包装，因为左栏变得更大.. 或如果这不方便您应该尝试使其与左侧浮动< /强>

Answer 2

尝试添加到左栏：

position:absolute;
top:0px;
bottom: 0px;

并确保您的主体元素具有位置：相对或其他位置属性。

这应该使左列拉伸以适合父元素的高度（只要它也定位，位置：相对使这很容易。

我刚刚发现了这种技术并且还没有尝试过，但它是有道理的，我打赌它会起作用。