css - 包装 div 的垂直滚动

Question

我正在尝试实现一种带有 div 的表格。第一个“列”必须固定，其他的可以水平滚动。这些事情都实现了，现在到了问题:垂直滚动。

我希望只有一个滚动条以相同的方式(同步)滚动两个 div，为了达到这个目标，我将两个 div 放在另一个 div 中，但它不起作用。

HTML

<div class="recipe_rows">
    <div class="recipe_first_col">
        <div class="recipe_row recipe_header">
            <!-- row for buttons -->
            <p>C1R1</p>
        </div>
        <div class="recipe_row">
            <!-- row for segment selection -->
            <p>C1R2</p>
        </div>
        <div class="recipe_row">
            <!-- row for setpoints -->
            <p>C1R3</p>
        </div>
        <div class="recipe_row">
            <!-- row for events -->
            <p>C1R4</p>
        </div>
    </div>
    <div class="recipe_cols">
        <div class="recipe_row recipe_header">
            <!-- row for buttons -->
            <p>C2R1</p>
            <p>C3R1</p>
        </div>
        <div class="recipe_row">
            <!-- row for segment selection -->
            <p>C2R2</p>
        </div>
        <div class="recipe_row">
            <!-- row for setpoints -->
            <p>C2R3</p>
            <p>C3R3</p>
            <p>C4R3</p>
            <p>C5R3</p>
            <p>C6R3</p>
            <p>C7R3</p>
            <p>C8R3</p>
            <p>C9R3</p>
            <p>C10R3</p>
            <p>C11R3</p>
            <p>C12R3</p>
            <p>C13R3</p>
        </div>
        <div class="recipe_row">
            <p>C2R4</p>
        </div>
    </div>
</div>

CSS

.recipe_rows {
    width: 99%;
    height: 180px;
    overflow: auto;
    line-height: 52px;
    clear: both;
    overflow-y:visible;
}

.recipe_rows p {
    float: left;
    width: 165px;
    height: 40px;
    line-height: 40px;
    padding: 5px;
    margin: 0px;
}

.recipe_first_col {
    float: left;
    width: 175px;
    height: 99%;
    background: #eee;
    /*overflow: auto;*/
    overflow-y: hidden;
}

.recipe_cols {
    height: 99%;
    margin-left: 175px;
    /*overflow: auto;*/
    overflow-y: hidden;
}

.recipe_header {
    font-weight: bold;
    border-bottom: 1px solid #333;
    border-top: 1px solid #aaa;
    color: #fff;
    background: #006 url('../media/menu_blu.png');
}

.recipe_row {
    float: left;
    white-space: nowrap;
    width: inherit;
    clear: both;
}

JSFiddle

如您所见，第 4 行被剪掉了。如何获取外部div的垂直滚动条？

感谢大家

编辑

好的，我做了一些我需要的东西: JsFiddle v.2

现在的问题是:水平滚动条可能不在“表格”的末尾，而是固定在 div recipe_cols 的底部？

Answer 1

如果我理解正确，这就是您想要的行为:See Fiddle

为此，您需要将行包装在另一个 div 中以启用垂直滚动。对于这个，只需使用绝对定位来获得正确的大小。

相关代码:

HTML

<div class="recipe_rows">
    <div class="recipe_first_col">
        <div class="recipe_row recipe_header">
            <!-- row for buttons -->
            <p>C1R1</p>
        </div>
        <div class="recipe_row">
            <!-- row for segment selection -->
            <p>C1R2</p>
        </div>
        <div class="recipe_row">
            <!-- row for setpoints -->
            <p>C1R3</p>
        </div>
        <div class="recipe_row">
            <!-- row for events -->
            <p>C1R4</p>
        </div>
    </div>
    <div class="recipe_cols">
        <div class="recipe_row recipe_header">
            <!-- row for buttons -->
            <p>C2R1</p>
            <p>C3R1</p>
        </div>
        <div class="row-scroll">
            <div class="recipe_row">
                <!-- row for segment selection -->
                <p>C2R2</p>
            </div>
            <div class="recipe_row">
                <!-- row for setpoints -->
                <p>C2R3</p>
                <p>C3R3</p>
                <p>C4R3</p>
                <p>C5R3</p>
                <p>C6R3</p>
                <p>C7R3</p>
                <p>C8R3</p>
                <p>C9R3</p>
                <p>C10R3</p>
                <p>C11R3</p>
                <p>C12R3</p>
                <p>C13R3</p>
            </div>
            <div class="recipe_row">
                <p>C2R4</p>
            </div>
        </div>
    </div>
</div>

CSS

.recipe-cols {
    position:relative;
}

.row-scroll {
    position:absolute;
    top:52px;
    bottom:0;
    left:0;
    overflow-y:scroll;
}