Last active
August 29, 2015 14:27
-
-
Save chenglou/77b051ff21f83a2ea080 to your computer and use it in GitHub Desktop.
Chat field
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style> | |
| * { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| body, | |
| html { | |
| height: 100%; | |
| } | |
| .container { | |
| padding: 10px; | |
| display: flex; | |
| width: 50%; | |
| height: 90%; | |
| justify-content: center; | |
| } | |
| .wrap { | |
| flex: 1 0 50%; | |
| outline: 1px solid; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| } | |
| .chat { | |
| flex: 1; | |
| outline: 1px solid; | |
| overflow: scroll; | |
| display: flex; | |
| flex-direction: column-reverse; | |
| } | |
| .input { | |
| flex: 0 0 50px; | |
| } | |
| .bubble { | |
| padding: 5px; | |
| margin: 5px; | |
| outline: 1px solid black; | |
| } | |
| .bubble-last { | |
| outline: 1px solid red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="wrap"> | |
| <div class="chat"> | |
| <div class="convo"> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis expedita quod numquam ullam totam deserunt minus perferendis recusandae, veniam maxime similique sequi molestiae distinctio atque inventore quia quis eveniet ratione!</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis rem amet repudiandae cum beatae illum cumque vitae expedita, impedit voluptate. Et fuga deleniti fugiat magnam quod unde molestias. Totam, tenetur.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente similique, modi atque nemo voluptatibus a beatae error. Blanditiis, architecto incidunt. Saepe sed iure unde illo iste impedit, praesentium consequatur voluptatum!</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui maiores porro fugit, provident sint esse repellendus odit laborum beatae dolorum, quod incidunt voluptatum possimus iste architecto quos non cumque eveniet.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae debitis labore magnam molestiae harum! Pariatur minus, perferendis voluptatibus rem vel non molestiae in obcaecati tempora sint harum aperiam corrupti illo.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda similique asperiores, possimus animi quasi mollitia sunt ut, recusandae neque autem omnis porro sint obcaecati voluptatem non explicabo ipsam nisi iste!</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste minima harum consectetur aut at praesentium voluptate alias explicabo? Esse odit facilis exercitationem ex ipsam consequuntur excepturi iste rem saepe, voluptatibus!</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptate ea autem voluptatum incidunt earum facere qui nesciunt vitae. Quaerat sunt, natus, debitis esse libero totam ab consequatur? Veritatis, ab.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, ipsum. Quibusdam rerum nobis fugit veniam dolorum tempore impedit, beatae ipsa dignissimos, officiis quos maiores, repellendus soluta sint ut! Consectetur, earum?</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum mollitia quasi veniam, impedit. Labore excepturi at placeat praesentium, iste sint, ullam dignissimos voluptates vel, explicabo aspernatur incidunt eveniet esse, sed.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores beatae velit ad, repudiandae esse neque libero aperiam saepe, nihil voluptatibus rem nam veritatis sunt voluptatem assumenda veniam ex nulla fuga.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam ad commodi ipsam tempora laborum ducimus expedita, voluptates nesciunt odit. Reprehenderit placeat, quasi fuga commodi eaque consequuntur veniam aut quia officia!</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque qui voluptatum est, quos culpa mollitia, distinctio porro provident facere aspernatur earum sint, iusto dolore, explicabo modi quo commodi quam. Blanditiis.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus inventore, eos ab quis facere similique sint consectetur quam at excepturi, architecto odit, officia reiciendis harum magnam dolorem id ex. Deserunt.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio magnam quibusdam eum aut enim. Inventore iure hic dolore veritatis, vel harum eum rem doloribus, earum debitis officiis, voluptatum cum vitae.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nobis doloremque repudiandae beatae blanditiis voluptates qui ea veniam dolorem quia, ullam non rerum aliquam, esse nesciunt delectus obcaecati quidem atque!</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod provident ipsum, dolores id. Esse hic sapiente provident cum repudiandae quam ipsam velit placeat accusamus deleniti assumenda nobis, illum nemo consequatur?</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ex ipsum, non sed nulla dicta alias reprehenderit iusto tenetur consequuntur soluta impedit voluptatem placeat perspiciatis aliquid magnam facilis eligendi blanditiis!</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa doloremque repellendus, animi fugiat? Error natus possimus consequatur culpa, sequi voluptatum quae reiciendis minima ullam. Sunt, sint quasi pariatur dignissimos cumque.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In id voluptate ipsum dolor sapiente ea quas consequuntur, possimus, ducimus reprehenderit unde recusandae accusamus optio. Numquam ipsum, blanditiis quam minus neque.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eius iste, veniam provident numquam est obcaecati vitae eligendi odio. Ab veritatis consectetur quia quibusdam obcaecati modi facilis distinctio sit quaerat.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe obcaecati impedit natus dolore voluptatibus placeat officiis enim ducimus totam sit tempora nisi molestiae, vero nesciunt numquam porro dolorum voluptas molestias!</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis sequi omnis tempora eaque debitis tempore temporibus iusto mollitia suscipit, in cupiditate quia commodi, aspernatur odit saepe tenetur, dolorum qui? Sed!</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore odit iusto suscipit ab quae optio fugit minus vitae ut quos recusandae sit laborum ex, maiores et dolorum, corporis consequatur delectus.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, suscipit repudiandae, provident dolores veniam ad velit culpa est quisquam ut error possimus. Dolore harum dolorem ullam? Cum nihil ipsam, quisquam.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint enim amet, omnis vel ipsa placeat quisquam illum pariatur quasi architecto a sed dolore tempore! Quas dicta sint vitae in!</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi illum, quisquam alias quis pariatur. Repellendus quasi exercitationem alias sit temporibus sapiente est dolor provident rerum, earum, dolorem quam, labore tempore.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quam voluptates nostrum sed non error fugit, explicabo ratione blanditiis maiores. Architecto, aut magnam molestiae doloribus! Perspiciatis aspernatur vel distinctio animi?</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem facere dolores aperiam accusamus totam facilis exercitationem aut id pariatur, sint, ipsum illo incidunt quae nulla ducimus animi dolore. Excepturi, possimus.</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis facilis voluptatum illo, ad. Assumenda, ab laborum voluptate recusandae? Aperiam laborum officiis placeat ducimus, nihil beatae dignissimos. Aliquid aspernatur id voluptates!</div> | |
| <div class="bubble">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad repellendus modi molestias cumque, voluptates animi dolore fugit. Mollitia tempore dolores esse distinctio est aperiam, nemo, deserunt, perspiciatis atque aliquid laboriosam.</div> | |
| <div class="bubble bubble-last">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae sapiente iusto aut, dignissimos, error numquam tempore? Asperiores similique, a cumque excepturi, saepe distinctio provident voluptatem obcaecati architecto enim reprehenderit vel!</div> | |
| </div> | |
| </div> | |
| <div class="input">Input field</div> | |
| </div> | |
| <a href="https://gist.github.com/chenglou/77b051ff21f83a2ea080">Source</a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment