包装div的垂直滚动

时间:2013-07-26 13:00:40

标签: css html scroll

我正在尝试用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的底部?

2 个答案:

答案 0 :(得分:0)

如果我理解正确,这就是你想要的行为: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;
}

答案 1 :(得分:0)

这是你需要的吗? FIDDLE.

CSS

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