Question

在父div中使用overflow-x时，此parent-div的背景颜色将仅用于最初可见的区域，而不会用于隐藏/滚动可用部分。

我希望＆＃39; row＆＃39;在任何地方都有适当的背景（绿色，蓝色）。

    .row:nth-child(odd)
{
    background-color: green;    
}

.row:nth-child(even)
{
    background-color: blue;    
}

.col
{
    display: table-cell;
    width: 200px;
    min-width: 200px;
}

.col2
{
    display: table-cell;
    width: 400px;
    min-width: 400px;
}

    <div style="overflow-x: auto; background-color: red; margin-top: 50px">
    <div class="row">
        <div class="col">text 1</div>
        <div class="col">text 2</div>
        <div class="col">text 3</div>
        <div class="col">text 4</div>
        <div class="col">text 5</div>
        <div class="col">text 6</div>
        <div class="col">text 7</div>
    </div>
    <div class="row">
        <div class="col2">Row2 Cell 1</div>
        <div class="col2">Row2 Cell 2</div>
        <div class="col2">Row2 Cell 3</div>
        <div class="col2">Row2 Cell 4</div>
        <div class="col2">Row2 Cell 5</div>
        <div class="col2">Row2 Cell 6</div>
        <div class="col2">Row2 Cell 7</div>
    </div>
    <div class="row">
        <div class="col2">Row3 Cell 1</div>
        <div class="col2">Row3 Cell 2</div>
        <div class="col2">Row3 Cell 3</div>
        <div class="col2">Row3 Cell 4</div>
        <div class="col2">Row3 Cell 5</div>
        <div class="col2">Row3 Cell 6</div>
        <div class="col2">Row3 Cell 7</div>
    </div>
    <div class="row">
        <div class="col2">Row4 Cell 1</div>
        <div class="col2">Row4 Cell 2</div>
        <div class="col2">Row4 Cell 3</div>
        <div class="col2">Row4 Cell 4</div>
        <div class="col2">Row4 Cell 5</div>
        <div class="col2">Row4 Cell 6</div>
        <div class="col2">Row4 Cell 7</div>
    </div>
</div>

Answer 1

将overflow:auto添加到.row以恢复您寻找的行为。

.row {
    background-color: green;
    overflow:auto;
}

<强> jsFiddle example

overflow-x螺丝背景颜色的div

1 个答案: