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

Question

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

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

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

我已经使用 javascript 完成了这项工作。

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

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

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

Answer 1

根据“浮动”提示，这是要走的路：

1. 将左列重新排列到右列元素内
2. 将右列元素设置为 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/

Answer 2

添加到 foobored 的帖子 - 因为他比我快 - 将 Max-width 添加到左侧 div。并且随着您的扩展 - 它的宽度不超过页面的 50%，同时将文本保留在其内部。

JSFIDDLE

* { margin: 0; padding: 0 }
#top { height: 100px; background: orange }
#mid { position: absolute; top: 100px; bottom: 0; width: 100% }

#left {
    float:left;
    max-width: 50%;
    background: SkyBlue;
    height:100%;
}

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

Answer 3

试试这个：

* { margin: 0; padding: 0 }
#top { height: 100px; background: orange }
#mid { position: absolute; top: 100px; bottom: 0; width: 100% }

#left {
    float:left;
    max-width: 50%;
    background: SkyBlue;
    height:100%;
    width: auto;
}

#right {
    position: absolute;
    background: YellowGreen;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    overflow: auto;
}

Fiddle.

Answer 4

如果我对您的理解正确，这就是您的解决方案：

http://jsfiddle.net/BJFME/3/

#flexbox {      
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: start;
    -webkit-box-align: start;

    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: start;
    -moz-box-align: start;

    display: box;
    box-orient: horizontal;
    box-pack: start;
    box-align: start;

    overflow: hidden;
}
#flexbox .col {
    width: 27.333%;
    padding: 30px 3% 0;

    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
#flexbox .col p {
    margin-bottom: 30px;
}
#flexbox .col:nth-child(1) {
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    box-ordinal-group: 2;
    background: #ccc;
}
#flexbox .col:nth-child(2) {
    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    box-ordinal-group: 1;
    background: #eee;
}
#flexbox .col:nth-child(3) {
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    box-ordinal-group: 3;
    background: #eee;
}

刚刚从这个网站获取代码：

http://css-tricks.com/fluid-width-equal-height-columns/

有不止一种解决方案。

Answer 5

我认为您正在尝试实现表格布局，试试这个http://jsfiddle.net/MtBXf/

<div id = "top"></div>
<div id = "mid">
    <div id = "left">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </p>
        </div>
    <div id = "right">
        <p>And here goes the content for the right part</p>
    </div>
</div>



* { margin: 0; padding: 0 }
#top { height: 100px; background: orange }
#mid { display:table-row; top: 100px; bottom: 0; width: 100% }

#left, #right {
    display:table-cell;
    width: 50%;
    max-width: 50%;
}
#left {
    background: SkyBlue;
}
#right {
    background: YellowGreen;
}

Answer 6

也许以下 css 2.1 解决方案甚至可以在旧 IE 版本中使用：

<div id = "top"></div>
<div id = "mid">
    <div id = "left">
        <p>Lorem Ipsum Somささsething</p>
        <p>Lorem Ipsum Something 23dsdsdsdsd</p>
         <div id = "right">
            dsdsdsdsd
        </div>
   </div>
</div>
* { margin: 0; padding: 0 }
#top { height: 100px; background: orange }
#mid { position: absolute; top: 100px; bottom: 0; width: 100% }

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

#right {
    position: absolute;
    background: YellowGreen;
    top: 0;
    left: 100%;
    min-height: 100%;
}