Home/ Questions/Q 6685049
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:00:43+00:00

What I’m trying to create is web panel that displays console output. The problem

  • 0

What I’m trying to create is web panel that displays console output.
The problem I’m having is that, in order to display my console output at the bottom of the page, it seems I must use absolute positioning. I haven’t found any other method of doing this and it will not work with “overflow: auto;”

I am wondering if there are any other ways of doing this.

What I have currently works, but does not have scrolling:

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;
}

There’s some useless things in here that are left over from me trying things, but the problem is apparent.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is that the actual content is inside an absolutely positioned element which will have no effect on its parents’ overflow properties.

    You need to place a max-height (max-height:100%) on the #ajax element and move the ‘overflow:auto;’ statement to that #ajax css declaration as well. It will probably work without moving the overflow statement, but it makes more sense this way.

    Here’s a jsfiddle demonstrating this: jsfiddle example

    • 0