html - CSS: Position Dynamically Sized div to Bottom of Static Div -
i'm adding chat functionality websocket based web app. in conventional chat windows, eldest message @ top of window , newest @ bottom.
my implementation should share typical, top bottom element order. however, in conventional chat windows, eldest message sticks top of frame. implementation should have youngest message sticking bottom of frame. i've seen of son playing it, minecraft has ideal chat interface. in truth, minecraft chat interface appears resemble want implement.
how, in css, can make chat messages stick bottom of window?
this easy if calc()
offered means refer current height of element being applied to, like
position: relative; top: calc(240px - [current element height]);
where 240px static height of chat window.
thanks in advance.
first, put position:relative
on parent container
#container{ position:relative; }
then, put position:absolute
on chat window
#chat{ position:absolute; bottom: 0px; }
this should handle dynamic heights.
Comments
Post a Comment