0

私は次のhttp://jsfiddle.net/4G33W/1/を持っています

これは流動的で正常に動作しますが、#commentWrapper のリストにさらに項目が追加されると、全体が「下に」押し出されてレイアウトが崩れます。

さらにいくつかのアイテムをテストコピーする<li>test</li>と、私の意味がわかります。入力ボックスを (atm のように) 一番下に置いておき、リストが十分に長くなってそこに到達したら、リストを「overflow-x:auto」モードにする必要があります。全体の「流動性」が損なわれるため、固定の高さを使用することはできません。または、少なくとも私が試した方法ではうまくいかなかったようです。

ここに css/html ソリューションはありますか? 解決策として JavaScript を使用する必要がありますか? 回答にjavascriptが含まれている場合に備えて、jqueryも使用しています。

4

2 に答える 2

2

「高さ：100％;」であるため、@Bogdanソリューションが機能します。「position: absolute;」の場合に機能します。が設定されています。構築する必要があるレイアウトと、サポートする必要があるブラウザーに注意してください。

また、ボックスのサイズ変更のサポートに使用できますを参照してください。

于 2013-09-25T17:26:19.847 に答える
1

この場合、純粋な css で実行できます。これらのルールを#commentWrapper要素に適用するとうまくいきます:

#commentWrapper {
    width: 17%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    padding-bottom: 20px;
    overflow-y: auto;
}

ここで jsfiddle を使用: http://jsfiddle.net/4G33W/2/

于 2013-09-25T16:32:16.730 に答える