Question

我正在尝试创建的是显示控制台输出的Web面板。我遇到的问题是，为了在页面底部显示我的控制台输出，似乎我必须使用绝对定位。我还没有找到任何其他方法，它不适用于“overflow：auto;”

我想知道是否有其他方法可以做到这一点。

我目前的工作原理，但没有滚动：

HTML：

<div id="main">
    <div id="header">
        Stuff
    </div>
    <div id="buttons">
        buttons
    </div>
    <div id="wrapper">
        <div id="content">
            <div id="ajax">
                Connecting to server...
                <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
                line of text
            </div>
        </div>
    </div>
    <div id="input">
        input box here
    </div>
</div>

CSS：

#header {
    position: absolute;
    top:0;
    background-color: #EEEEEE;
    width: 100%;
    height: 100px;
}
#buttons {
    position: absolute;
    top: 100px;
    width: 100%;
    height: 26px;
}
#wrapper {
    position: absolute;
    top: 126px;
    bottom: 26px;
    width: 100%;
    overflow: auto;
}
#content {
    width: 100%;
    min-height: 100%;
}
#ajax {
    width: 100%;
    position: absolute;
    bottom: 0px;
}
#input {
    width: 100%;
    height: 26px;
    position: absolute;
    bottom: 0px;
}

这里有一些无用的东西从我尝试的东西遗留下来，但问题很明显。

Answer 1

问题是实际内容位于一个绝对定位的元素内，这对其父元素的溢出属性没有影响。

你需要在#ajax元素上放置一个max-height（max-height：100％）并移动'overflow：auto;'声明也是#ajax css声明。它可能会在不移动溢出语句的情况下工作，但这种方式更有意义。

这是一个证明这一点的jsfiddle：jsfiddle example

Answer 2

尝试从CSS中的#ajax中删除 位置：绝对 。它会显示滚动条。

#ajax {
    width: 100%;
    /*position: absolute;*/
    bottom: 0px;
}

底部对齐可滚动div中的文本

2 个答案: