1

ここに画像の説明を入力興味深いレイアウト設計の問題があり、何か助けが得られるかどうか疑問に思っていました。

2 つのコンテナーが隣り合っており、ほとんどの場合、右側のコンテナーは静的にサイズ設定されています。左側のものは、動的に読み込まれたコンテンツに基づいて拡大する必要があります。これにはかなりの数のデータセット、または単一のデータセットのみが含まれる可能性があります。これで、右のコンテナは常に左のコンテナの隣にあるはずです。

ここがトリッキーな部分です。左のコンテナーは折り返すことができず、画面の残りの幅まで使用する必要があり、その時点でスクロール バーが表示されます。この時点で、右のコンテナは画面の端に隣接しています。

左のコンテナが常に残りの画面領域を占有する場所で動作させることができますが、これにより、左側にほんの少しのデータしかない場合でも、右のコンテナが右側に押し出されます。

また、データを拡大して右側を左側に配置することもできますが、オーバーフロー スクロールバーは表示されません。これらの要件をすべて解決する方法について、私は頭を悩ませています。

すべての幅を設定することもできますが、それは実際には画面解像度まで拡大するという要件を解決するものではなく、それでも少量のデータのみを解決するものではありません

編集：現在のレイアウトの画像を添付しました。これは、ブラウザーの幅の 100% を占める「いっぱい」であるため、見栄えがよくなります。私が必要とするのは、データ列が非常に小さくなってスクロールできなくなった場合に、右側の部分を左側に移動させることです。

4

2 に答える 2

1

あなたが達成しようとしていると思うことのjsfiddleをまとめました。

  1. 右側の列は、幅と位置が固定されています。
  2. 左の列は幅が広がり、幅が狭すぎて中のコンテンツを表示できない場合はスクロールします。

例を次に示します: http://jsfiddle.net/MwdED/

HTMLは次のとおりです。

<div class="container">
    <div class="col-left">
        <div class="col-content">
            <div class="wide-content">
                THis is some wide content, sitting inside of the left column.
            </div>
        </div>
    </div>
    <div class="col-right">
        <div class="col-content">
            This is the right column.  It's fixed in width.
        </div>
    </div>
</div>

そして、CSS

.container {
    position: relative;
    min-width: 500px; /*make sure the columns don't collapse on top of each other*/
}

.col-left {
    padding-right: 200px; /*make room for right column*/
}

.col-left .col-content {
    min-width: 300px; /* the minimum width, before overflow scrolling occurs */   
    overflow: auto;
}

.col-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
}

.wide-content {
    background: red;
    width: 1000px;
}
于 2013-01-22T21:12:02.940 に答える
0

Axel が提供したものを使用すると、このようなものが確実に機能すると思いました。その意図は、両方のコンテナを流動的にして、どちらが大きくなったり縮んだりしても、もう一方がその差を吸収するようにすることでしたが、何らかの理由でコンテナが互いに出血してしまいました.

.col-left .col-content {
    min-width: 20%; /* the minimum width, before overflow scrolling occurs */ 
    max-width: 80%;
    overflow: scroll;
}

.col-right {
   position: absolute;
   right: 0;
   top: 0;
   min-width: 20%;
   max-width: 80%;
}
于 2013-01-23T14:09:40.457 に答える