从父页面删除滚动

Question

我在div中有一个高大的表格：

http://jsfiddle.net/8qxwLnd7/

<div class="top">
</div>
<div class="bottom">
    <form>
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
        ..
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
    </form>
</div>

表单的高度比页面大，所以我在整个页面上都有一个滚动条：

如何让滚动条在窗体内？

Answer 1

如果你在html和body上定义一个高度，将溢出设置为隐藏在它们上面，然后在表单容器上设置一个溢出，你应该得到你想要的：

＆＃13;

＆＃13;

.top {
    width: 100%;
    height: 60px;
    background-color: red;
}
.bottom {
    width: 100%;
    height: 100%;
    background-color: yellow;
    overflow:scroll;
}
.item {
    width: 100%;
}
html,body {
    height:100%;
    overflow:hidden;
}

＆＃13;

<div class="top"></div>
<div class="bottom">
    <form>
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
        <label class="item">Lbl1:</label>
        <input class="item" type="text" />
    </form>
</div>

＆＃13;

＆＃13;

＆＃13;