CODEWITHSUNDEEP
jqueryhtmlcss
Alnedru
Alnedru

Reputation: 2655

Css how to make mid windown in chat adjust automatically

I have here a chat window, but i fail to set it up graphically correctly.

Here is a link: http://jsfiddle.net/UD2KL/ It has this structure

<nav> </nav>
<div id="chatwindow">
   <div id="message window">
   </div>
</div>
<footer></footer>

So The top is good, it is fixed, the top is also good it is fixed, but the mid where normally the messages should appear here i fail.

If i give it a default value for height like 480, then it is good, i get a scroll bar etc for some size of window it is perfect but when you make window bigger or smaller, so you starting to scale window, the message div is stack to 480 .... if i make it auto height, then i never get scrollbar ...

Anyone can help with this?

Thanks

Upvotes: 2

Views: 87

Answers (2)

Zubzob
Zubzob

Reputation: 2743

As Mr.Alien pointed out, your CSS needs a bit more organization.

But anyhoo, this is my solution: http://jsfiddle.net/eH4nq/

The important bit is the $window.on('resize', function(e){ part. You basically substract the distance from the container to the top from the distance from the footer to the top.

I've also made some small changes in your CSS. I've added a height: 100% on body, reduced a bit the margins and moved the overflow: auto on the #chatwindow.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

Your CSS and HTML is quiet messy, I would've provided you a CSS solution but that may not be the easy way here, by using a wrapper div and all stuff, but anyways you are using jQuery so use .height()

if($(document).height() > $(window).height()) {
    $('#footer').css({'position': 'static'});
}

Demo

So the condition here means, if $(document).height() which is documents height is more than $(window).height() which is nothing but viewports height than set your #footer position to static

Upvotes: 1

Related Questions