4

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

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

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

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

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

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

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

4

6 回答 6

0

Maybe the following css 2.1 solution that works even in older IE versions:

<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%;
}
于 2014-08-15T09:02:44.887 回答
0

添加到 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;
}
于 2013-06-12T18:15:37.307 回答
0

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

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/

有不止一种解决方案。

于 2013-06-12T20:08:34.617 回答
0

尝试这个：

* { 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;
}

小提琴。

于 2013-06-12T18:26:39.400 回答
0

我认为你正在尝试实现表格布局，试试这个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;
}
于 2013-06-18T10:04:21.270 回答
0

基于“浮动”提示，这是要走的路：

  1. 将左列重新排列到右列元素内
  2. 将右 col 元素设置为 100% 宽度
  3. 将左边的 col 设置为“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>

见这个分叉小提琴的例子http://jsfiddle.net/UXGjt/

于 2013-06-12T17:59:20.533 回答