html - 如何删除列布局中的绝对 div 并保持相同的布局？

Question

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

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

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

Link to previous question

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

Answer 1

看看这个

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%;
}

演示:Fiddle