3

私はウェブアプリを作っていて、現在、基本的なデザインを完成させようとしています。そのため、ページには x 軸上で浮動できる列がいくつかあるはずです。これらの幅は今のところ静的で、高さはブラウザ ウィンドウの 100% になります。ここに JSFiddle があります: http://jsfiddle.net/qAUXQ/

これらの列の内側には、垂直方向に中央揃えのコンテンツがあるはずです。ただし、1 つの列のコンテンツがブラウザー ウィンドウよりも高い場合は、スクロール バーが表示されます。問題は、高さが動的であるため、私が考えることができる (そして Google で見つける) 唯一の方法は、display: tableメソッドを使用することです。

問題は、div のスクロールバーが機能しないことです。そのため、ブラウザー ウィンドウが小さすぎると、ユーザーはそれを見ることができません。スクロールできません！

以下は、JSFiddle を使用したくない場合のコードです。

<div class="bar">
    <div class="middle">
        <div class="contents">
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
        </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;

}

body {
    background: #f4f1ed;
}

.bar {
    height: 100%;
    border-style: solid;
    width: 360px;
    display: table;
    border-width: 0 1px;
    border-color: #ddd;
    position: absolute;
    transition: left 500ms;
    -moz-transition: left 500ms;
    -webkit-transition: left 500ms;
    -o-transition: left 500ms;
    z-index: 10;
    background: #f2f2f2;
}

.bar div.middle {
    display: table-cell;
    vertical-align: middle;
}

.bar div.contents {
    padding-left: 60px;
    overflow-y: scroll;
    overflow-x: hidden;
}
4

3 に答える 3

1

あなたが何を求めているのかを正確に理解するために少し時間を割いてください。しかし、私が集めているものから、あなたは高さを追加して使用してみたくなるかもしれません

overflow:scroll;

編集（更新）

少しシャッフルする必要がありましたが、これは機能します：

    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background: #f4f1ed;
}
.bar {
    height: 100%;
    border-style: solid;
    width: 360px;
    border-width: 0 1px;
    border-color: #ddd;
    position: absolute;
    transition: left 500ms;
    -moz-transition: left 500ms;
    -webkit-transition: left 500ms;
    -o-transition: left 500ms;
    z-index: 10;
    background: #f2f2f2;
    overflow:scroll;
}
.bar div.middle {
    height: 100%;
    display: table;
}
.bar div.contents {
    padding-left: 60px;
    display: table-cell;
    vertical-align:middle;
}

完全なソリューションについては、 http：//jsfiddle.net/qAUXQ/7/をチェックしてください（更新）

センタリング用に更新されました。あなたが行っていた方向にテーブルとテーブルセルを使いたい。マイナーリストでチェックアウトし、中央に配置され、長いリストでスクロールします。お役に立てれば。

于 2013-01-22T15:31:53.040 に答える
1

さて、私は最終的に自分でそれを理解しました。とても簡単でしたが、私はただ「盲目」でした...

これがフィドルです：http://jsfiddle.net/qAUXQ/6/

次のようにしてください：

div bar
    div container
        div contents
            contents

次に、いくつかの CSS を実行します。

.bar {
    overflow-x: hidden;
}

.container {
    display: table;
}

.contents {
    display: table-cell;
    vertical-align: middle;
}

私が最初にしたことは、.bar を に設定することでしたdisplay: table。そのため、スクロールバーは機能しませんでした。これで、スクロールバーが .bar に設定されました。

于 2013-01-22T18:50:13.753 に答える
0

私はあなたが何をしようとしているのか正確にはわかりません.bar divの高さをスクロールバーで100％にし、垂直方向の中央に.middleと.contentsを配置することをお勧めします。したがって、次のことを変更してみてください。

.bar {display:block; overflow: auto; height: 100%; min-height:100%; width:100%; }

display:table に div タグを追加します。

div.table{
height:100%;
border-style: solid;
width: 360px;
display: table;
border-width: 0 1px;
border-color: #ddd;
position: absolute;
transition: left 500ms;
-moz-transition: left 500ms;
-webkit-transition: left 500ms;
-o-transition: left 500ms;
z-index: 10;
background: #f2f2f2;}

残りの 2 つのテーブル要素を垂直方向と水平方向の位置合わせに使用するだけです。オーバーフローはありません。これで、テーブルを設定するための 3 つの div と、オーバーフローとスクロールバーを制御する 1 つの Div ができました。

このような？http://jsfiddle.net/WAjdp/

于 2013-01-22T18:39:42.190 に答える