I am currently working on creating a web panel that will display console output. My issue arises when I try to position the console output at the bottom of the page - it seems like I need to use absolute positioning for this. So far, I haven't found any other method that works, especially one that is compatible with "overflow: auto;"
Is there another approach or technique that I could use to achieve this?
Although my current setup displays the content, it lacks scrolling functionality:
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 are some unnecessary elements in the code as I have been experimenting, but the underlying problem remains unresolved.