0

我今天早些时候问了一个问题并得到了我接受的答案，它似乎可以工作，除了当列内容变得大于浏览器窗口时出现的问题，因为我无法向下滚动。

有没有办法在不使用绝对值的情况下获得与我在上一个问题中接受的答案中给出的相同结果？

这是我需要帮助解决的问题

链接到上一个问题

显示问题的 jFiddler 链接 jsfiddle.net/HKJvP/

4

2 回答 2

0

这是您应该查看的 css....display: 应该是内联的....这是针对两列的...对 3 列执行相同的操作....另一件事不要设置高度. 它应该随着内容自动增加......它也有助于动态页面......

                .wrapper{overflow:hidden; width:90%; padding:30px; margin:0 0 0 5%; }
               .wrapper .right {width: 80%;
                             padding-right: 20px;
                               float: right;
                              display: inline;
                          border: solid #000 1px 2px 2px 1px;
                        padding:10px;
                              }


            .wrapper .leftbar {
                 width: 15%;
                float: left;
           display: inline; padding:10px;
                 }
于 2013-03-09T09:40:46.903 回答
0

看看这个

HTML

<div class="left-fixed">
    Left side here!
</div>
<div class="floating-container">
    <div class="left">
        Center Fluid<br/>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>
    <div class="right">
        Right '200px width'<br/>

        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

    </div>
</div>

CSS

body, html{
    height: 100%;
    overflow-y: auto;
    margin: 0;
}

.left-fixed {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 230px;
    background-color: green;
}

.floating-container {
    background-color: red;
    height: 100%;
    margin-left: 230px;
}

.floating-container .left {
    float: left;
    width: 50%;
    background-color: yellow;
    min-height: 100%;
}

.floating-container .right {
    float: right;
    width: 50%;
    background-color: blue;
    min-height: 100%;
}

演示：小提琴

于 2013-03-09T10:21:18.567 回答