2

子が下部に固定されているコンテナ div があります。問題は、div のオーバーフロー スクロールバーが表示されると、最後の子の下マージンが非表示になることです。

http://jsfiddle.net/TxEAP/3/を参照してください。1最初は、 divの下に適切なマージンがあります。スクロールバーが最終的に表示されるように「1つ追加」をクリックすると、最後のdivに下マージンがなくなります。DevTools を開くと、最後の子のマージンが表示されますが、下まで完全にスクロールしても、コンテナーのビューポートの外側にあります。

これはどのように解決できますか？これを Google Chrome で動作させるだけで十分です。

HTML:

<div class="main">
    <div class="container">
        <div class="item">1</div>
        <!-- several of these .item divs -->
    </div>
</div>

CSS:

.main {
    height: 200px;
    overflow-y: scroll;
    position: relative;
    border: 1px solid black;
}

.container {
    width: 100%;
    max-height: 100%;
    position: absolute;
    bottom: 0;
}

.item {
    padding: 20px;
    margin: 15px;
    border: 1px solid black;
}​
4

2 に答える 2

3

これがフレックスボックスを使用した私の最終的な解決策です。-webkit-すべてのプレフィックスにもかかわらず、Chromeでは十分にサポートされています。基本的に、オーバーフローがない場合に、コンテナのスペースを上から埋める（実際の子が下に固定されるように）ダミー要素を用意するという考え方です。オーバーフローの場合、。のために自動的に非表示になりますheight: 0。証拠金の問題はなく、証拠金が崩壊することもありません。

http://jsfiddle.net/mCYLm/1/

HTML：

<div class="main">
    <div class="gap-filler"></div>
    <div class="item">foo</div>
    <!-- more `div.item`s -->
</div>

CSS：

div.main {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 200px;
    overflow-y: scroll;
}

div.main div.gap-filler {
    -webkit-box-flex: 1;
    height: 0;
}

div.main div.item {
    border: 1px solid black;
    margin: 20px;
    padding: 20px;
}​

編集：これはフレックスボックスなしのソリューションでしたが、選択の問題がありました。

最終的に機能したソリューションは次のとおりです：http：//jsfiddle.net/TxEAP/7/。これにより、Chromeが最後の.itemdivの余白を非表示にしないようにする非表示の「コンテンツ」が追加されます。

.container:after {
    content: "";
    font-size: 0;
    display: block;
    height: 1px;
}

編集：以下は、可能な場合にのみ機能しdisplay: inline-blockます。

ついに私は解決策を見つけました。最初のものを除いてすべて.itemsが持っている場合、マージンは非表示になりません。display: inline-block

http://jsfiddle.net/TxEAP/5/

.item:not(:first-child) {
    display: inline-block;

    /* attempt at getting `width: auto` like `display: block` has */
    width: -webkit-calc(100% - 2 * 15px);
    box-sizing: border-box;
}
于 2012-06-10T13:45:31.807 に答える
1

overflow-y: scroll;from.main.をクラスに移動するだけで.containerは、マージンは保持されます。唯一の欠点は、アイテムが 3 つ未満の場合 (特定のコンテナーの高さに対して)、フルハイトのプレースホルダーではなく、小さなスクロールバー プレースホルダーが得られることです。

コンテナを削除max-height:100%すると、Chrome 21 でのテストで修正されるようです。

オーバーフローがコンテナ上にあるようにプロパティを移動すると、最後に追加された要素のマージン/パディングが保持され、スクロールバーが表示されます。

.main {
    height: 200px;
    border: 1px solid black;
}

.container {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

于 2012-06-10T10:47:01.203 に答える