html - 在没有javascript的情况下水平定位两个绝对元素

Question

我有一个带有标题栏和下方两列的页面。这两列是绝对定位的，因此它们可以将它们的背景颜色扩展到页面底部。以下是限制条件:

• 我希望右列的左边缘从左列的右边缘结束的地方开始。
• 左栏中的文本随着一些 ajax 请求而改变。它需要扩展，所以我不能在左列上使用固定宽度。
• 右栏的宽度无关紧要。它的高度必须至少垂直填充页面 100% 到底部。如果内容低于页面底部，背景应该随之延伸。

这个想法是，用户将访问这个首页并且它看起来会“完整”，因为所有三个列在水平方向上几乎占据了整个页面，并且必须在垂直方向上占据整个页面.当他们向下滚动时，左栏可以结束，右栏可以继续。

我已经使用 javascript 完成了这个。

$("#right").css('left', $("#left").width()+'px');

我不想使用 javascript。我可以仅使用 CSS3 重新制作具有这些限制的页面吗？

http://jsfiddle.net/m3ta/BJFME/2/

Answer 1

基于“ float ”提示，这是要走的路:

1. 将左边的列重新安排到右边的列元素中
2. 将右侧的 col 元素设置为 100% 宽度
3. 将左列设置为“float:left”，并将其高度设置为 100%
4. 检查您是否还需要“中”榆树 ;)

CSS

#left {
    float:left;
    background: SkyBlue;
    height:100%;
}

#right {
    position: absolute;
    background: YellowGreen;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
}

HTML

<div id = "mid">
    <div id = "right">

        <div id = "left">
            <p>Lorem Ipsum Something</p>
            <p>Lorem Ipsum Something 23</p>
            <p>Lorem Ipsum Something 23 and much more text</p>
        </div>

        <p>And here goes the content for the right part</p>
    </div>
</div>

有关示例，请参阅此 fork fiddle http://jsfiddle.net/UXGjt/