CODEWITHSUNDEEP
htmlcss
TAAPSogeking
TAAPSogeking

Reputation: 360

100% Height In Table In Div

I have a table in a div. I need the div to resize with the window, but only the width changes. The div and table are defined as follows:

<div id="chatDiv">
    <table align='left' border='1'  id='messagetable'>
    </table>
</div>

And here is the css:

#messagetable {
    width: 99%;
    height: 99%;
    table-layout: fixed;
}

#chatDiv {
    background-color: black;
    color: yellow;
    width: 99%;
    height: 400px;
    border-style: solid;
    border-width: 2px;
    border-color: black;
    margin-bottom: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
}

There is enough text to have the scroll bar appear.

When I change the height to a percent, i.e. to height:100%;, it acts as if the line is not there. What I mean is that the result is the same without the line.

The strange thing is that the width changes. Setting overflow-y:hidden defeats the purpose.

Any ideas? Let me know if I need to clarify. Thanks in advance.

Upvotes: 0

Views: 148

Answers (1)

insertusernamehere
insertusernamehere

Reputation: 23580

I hope this is what you're looking for. Explicitly set the height of the body and set the height of the div back to percentage:

html, body {
    height: 100%;
}

#chatDiv{
    height:100%;
}

Demo

Try before buy

Upvotes: 2

Related Questions