ul{ padding:1.5rem 0.8rem; /*margin-bottom: 5rem;*/ } li { display: block; width: 100%; clear: both; } .time { text-align: center; color: #c8c8c8; font-size: 1rem; margin-bottom: 1rem; } .dailogue { font-size: 1.3rem; } .dailogue img { width: 3.6rem; height: 3.6rem; border-radius: 50%; background-color: #abcdef; } .headicon-other { float: left; } .headicon-self { float: right; } span { display: inline-block; } .left-trangle { width: 1rem; height: 1rem; border: 0.5rem solid; border-color: #ece9ed #fff #ece9ed #ece9ed; float: left; margin-top: 1rem; } .right-trangle { width: 1rem; height: 1rem; border: 0.5rem solid; border-color: #ece9ed #ece9ed #ece9ed #05c0ab; float: right; margin-top: 1rem; } .left,.right { min-height: 3.5rem; max-width: 18rem; border-radius: 10px; padding: 1rem; line-height: 1.8rem; } .left { background-color: #fff; color: #606060; float: left; } .right { background-color: #05c0ab; color: #fff; float: right; } .margin { margin-bottom: 1rem; } header { background-color: #fff; position: fixed; bottom: 0; z-index: 10; width: 100%; height: 3.8rem; } textarea { height: 3.8rem; line-height: 2rem; width: 100%; color: #777; border-style: none; resize: none; font-size: 1.5rem; padding: 1rem 4.5rem 0 1.5rem; } section { width: 4.4rem; height: 3.8rem; background-color: #fff; position: fixed; right: 0; bottom: 0; } #beforeheader{ width: 100%; height: 5rem; position: relative; bottom: 0; } #send { width: 2.5rem; position: absolute; top: 50%; left: 50%; margin-top: -1.125rem; margin-left: -1.2rem; } #commentBtn{ color: #05c0ab; position: fixed; bottom: 100px; z-index: 10; right: 20px; background: url("../images/bubble-icon.png"); background-repeat: no-repeat; background-size: cover; background-position: center 100%; width:38px; height: 38px; }