All geek questions in one place

Html chat layout layout, how can I make chatview use 100% percent of the page - lineedit size

I am trying to create an html5 chat client where I have a layout with a large chatwindow at the top and a small line at the bottom:

+-------------------+ | | | | | | | | +-------------------+ | | +-------------------+

How can I create a layout that always takes the size of the window? I tried a lot of things, but I either get a 100% chatwindow size, or two boxes, but not tall enough.

 <html> <head> <title>Chat Example</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" /> <script type="text/javascript" src="client.js"></script> <style type="text/css"> html { overflow: hidden; } body { overflow: hidden; padding: 0; margin: 0; width: 100%; height: 100%; background: gray; } #tabs{ margin:0; padding-top:4em; padding-left:12em; padding-bottom:3em; background: red; } #container{ margin-left:5px; margin-right:5px; margin-bottom:0px; margin-top:0px; min-height:10em; position: relative; background: green; } </style> </head> <body> <div id="tabs"> <p>Bar</p> </div> <div id="container" class="ui.widget"> <p>Foo</p> </div> </body> </html>
+4
source share
2 answers

Use position:absolute; . JSFiddle demo . This will not work in IE & le6; but works fine in IE & ge; 7 and other browsers (FF, Opera, Chrome).

 <div id="chatwindow"> <div id="messagewindow"> <!-- messages --> </div> <div id="inputcontainer"><p>Your message</p></div> </div> 
 #chatwindow{ position:relative; height:400px; /* if you wish to use all of your space, use position:absolute; top:0;left:0;right:0;bottom:0; or drop the chatdwindow div */ } #messagewindow, #inputcontainer{ position:absolute; left:0; right:0; border:1px solid #000; } #messagewindow{ overflow:auto; top:0; bottom:3em; } #inputcontainer{ display:block; bottom:0; height:1em; padding:.5em; margin-top:1em; } #inputcontainer > p{ margin:0; }
+5
source

HTML:

 <html> <body> <div id="top"> </div> <div id="bottom"> </div> </body> </html>

CSS

 html { height: 100%; } body { padding: 0; margin: 0; width: 100%; height: 100%; } #top { height: 100%; border:1px solid black; } #bottom { height: 100px; margin-top: -100px; border:1px solid black; }

http://jsfiddle.net/29hA9/2/

0
source

Source: https://habr.com/ru/post/1397627/

More articles:


All Articles