Faking a textarea with scrollbar and updating content

since I can not markup content inside tags I want to create my own "custom" textbox. The textbox should work as a kind of console, where the progress of battle (i.e.) is logged. I first tried to use a div, within a div, within divs for each log, but when the divs inside the outer divs exceed the max-开发者_开发技巧height, they ignore the surrounding divs.

Example:

Even if this would work I still got the problem, that there is no scrollbar, since it's not a <textarea>.

I googled a lot, but the only thing I found where overwhelming tutorials for dynamic feedreaders etc.

What I am looking for is a simple "textbox" aka "console" with scrollbar which contents do respect the borders of that console. Accomplished with jQuery.

Thank you very much!

Solution:

Before

<div id="battleLog" style="max-height:100px;height:100px;min-height:100px;">
    <div style="padding:2px 2px 2px 2px;">
        //content
    </div>
</div>

After

<div id="battleLog" style="max-height:100px;height:100px;min-height:100px;overflow-x:hidden;overflow-y:scroll;">
    <div style="padding:2px 2px 2px 2px;">
        //content
    </div>
</div>

try setting this css on your div

overflow-x:hidden;
overflow-y:scroll;

overflow: auto;
overflow-x: hidden;
overflow-y: auto;

Then in your jQuery, when the content of the div changes do this:

$('#theDiv').get(0).scrollTop = 10000000;

I'm not sure if that's the best way, but it's what I have working.

Well, you could add a scrollbar to your div by changing the overflow-y property:

#div{
overflow-y: scroll;

}

i think it's a better option than a textarea because you can also format the text.