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

正如你所看到的那样，第四排是切割的。如何获取外部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;
}

Answer 2

这是你需要的吗？ FIDDLE.

的 CSS 的

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

包装div的垂直滚动

2 个答案: