Question

最后一个div应该是100％的高度，但我希望它只显示到页面的末尾，而不是超出创建滚动条的那个。当div内的数据超出div的末尾时，我希望它能扩展，但如果内容很少则不会。

|xx    |
|xx    |
|______|

当没有很多内容时，我就是这么想的。

但是当内容很多时，我希望它如下：

|xx     |
|xx     |
|xx     |
|xx_____| << The point where if the content exceeds this, then a scroll bar comes up
|xx     |
|xx     |
|_______|

所以基本上，如果div中的内容穿过其他页面，滚动条应该出现，滚动条不应该出现。

请帮忙

Answer 1

假设你总是知道前两个元素的高度（在你的例子中就是这样），你可以用overflow: auto绝对位于页面底部的最后一个元素，以便在neccessery时提供滚动条： / p>

#last_div {
    position: absolute;
    top: 187px;
    bottom: 0;
    overflow: auto;
}

JSFiddle：http://jsfiddle.net/yDx55/2/

Answer 2

CSS：overflow：auto;

如果内容大于容器，它将仅显示滚动条。使用滚动强制它。

Answer 3

所以让你的Div有一个最小高度并设置溢出为auto;

#div {

    height: 300px;
    overflow: auto;
}

Answer 4

您可以将CSS设置为仅允许显示水平或垂直滚动条：

/*Vertical Scrollbar*/
#div {
    width      : 100%;
    height     : 100%;
    overflow-x : hidden;
    overflow-y : auto;
}

/*Horizontal Scrollbar*/
#div {
    width      : 100%;
    height     : 100%;
    overflow-x : auto;
    overflow-y : hidden;
}

即使不需要，您也可以强制滚动条出现：

#div {
    width    : 100%;
    height   : 100%;
    overflow : scroll;
}

以下是您的jsfiddle的更新版本：http://jsfiddle.net/yDx55/4/

以下是overflow的一些优秀文档：https://developer.mozilla.org/en/CSS/overflow

Div创建滚动条

4 个答案: