html - 列レイアウトの絶対divを削除して、同じレイアウトを維持するにはどうすればよいですか？

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

デモ:フィドル

Answer 2

これはあなたが見るべきcssです....display：インラインである必要があります....これは2列用です... 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;
                 }