Question

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

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

这个想法是用户将访问此首页，它将显示为“完整”，因为在所有三个列中几乎占据整个页面，必须垂直占据整个页面。当它们向下滚动时，左列可以结束，右列可以继续。

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

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

我不想使用javascript。我是否可以仅使用CSS3使用这些约束重新创建此页面？

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

Answer 1

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

将左侧col重新排列为右侧col元素
将右侧col元素设置为100％宽度
将左侧col设置为“float：left”并将其设置为100％
检查你是否还需要“mid”榆树;）

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>

请参阅此分叉小提琴，了解示例http://jsfiddle.net/UXGjt/

Answer 2

添加到foobored的帖子 - 因为他比我快 - 将最大宽度添加到左侧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%;
}

水平定位两个绝对元素，无需javascript

6 个答案: