html - div 的一个子元素可滚动到一个固定位置

标签 html css user-interface

我现在刚刚学习如何使用 SASS 和 CSS，并且在弄清楚如何使聊天 div 的内部可滚动，同时在滚动发生时使底部的输入字段保持不变时遇到了一些严重的问题。虽然我弄清楚了如何保持底部输入栏固定，但现在发生了两件事:

 1. The whole div does not scroll anymore
 2. Being fixed, now the width of the bottom bar is the same as the screen size since it is 100%, although I need it to be the same as its parent div.

我觉得我肯定错过了一些了解 CSS 的人会在一秒钟内发现的东西，但我花了几个小时试图弄清楚它，但仍然没有。以下是我的 CSS/HTML :JSFiddle

这是我的代码:

#frame {
  width: calc(100% + 30px);
  min-width: 360px;
  height: 92vh;
  min-height: 300px;
  background: #E6EAEA;
  margin-left: -15px;
  margin-right: -15px;
}

@media screen and (max-width: 360px) {
  #frame {
    width: 100%;
    height: 100vh;
  }
}

#frame .content {
  float: right;
  height: 100%;
  overflow: hidden;
  position: relative;
}

@media screen and (max-width: 735px) {
  #frame .content {
    width: 100%;
    min-width: 300px !important;
  }
}

@media screen and (min-width: 900px) {
  #frame .content {
    width: 100%;
  }
}

#frame .content .contact-profile {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #f5f5f5;
}

#frame .content .contact-profile img {
  width: 40px;
  border-radius: 50%;
  float: left;
  margin: 9px 12px 0 9px;
}

#frame .content .contact-profile p {
  float: left;
}

.contact-profile {
  overflow: hidden;
}

#frame .content .messages {
  height: auto;
  width: 100%;
  min-height: calc(100% - 60px);
  max-height: calc(100% - 60px);
  overflow: hidden;
}

@media screen and (max-width: 735px) {
  #frame .content .messages {
    max-height: calc(100% - 105px);
  }
}

#frame .content .messages::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

#frame .content .messages::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
}

#frame .content .messages ul li {
  display: inline-block;
  clear: both;
  float: left;
  margin: 15px 15px 5px 15px;
  width: calc(100% - 25px);
  font-size: 0.9em;
}

#frame .content .messages ul li:nth-last-child(1) {
  margin-bottom: 20px;
}

#frame .content .messages ul li.sent img {
  margin: 6px 8px 0 0;
}

#frame .content .messages ul li.sent p {
  background: #435f7a;
  color: #f5f5f5;
}

#frame .content .messages ul li.replies img {
  float: right;
  margin: 6px 0 0 8px;
}

#frame .content .messages ul li.replies p {
  background: #f5f5f5;
  float: right;
}

#frame .content .messages ul li img {
  width: 22px;
  border-radius: 50%;
  float: left;
}

#frame .content .messages ul li p {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 20px;
  max-width: 205px;
  line-height: 130%;
}

@media screen and (min-width: 735px) {
  #frame .content .messages ul li p {
    max-width: 300px;
  }
}

#frame .content .message-input {
  bottom: 0;
  width: 100%;
  z-index: 99;
}

#frame .content .message-input .wrap {
  position: relative;
}

.chatinput {
  float: left;
  border: none;
  width: calc(100% - 40px);
  border-radius: 0;
  padding: 11px 32px 10px 8px;
  text-rendering: optimizeLegibility;
  font-size: 0.8em;
  color: #32465a;
  resize: none;
}

.message-input {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.chatmessagesubmit {
  float: right;
  border: none;
  padding: 12px;
  cursor: pointer;
  background: #32465a;
  color: #f5f5f5;
  &:hover {
    background: #435f7a;
  }
}

.section-year {
  float: right;
  width: 48%;
}

.section-college {
  width: 48%;
}

#msgs {
  padding: 0px;
  overflow: auto;
  height: fit-content;
}

#message_content {
  line-height: 13px;
  border: 1px solid #ced4da;
}

.panel {
  overflow: hidden;
  margin-bottom: 60px;
}

#close_chat {
  float: right;
  font-size: 30px;
  margin: 0px 12px 12px 12px;
}
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div id="frame">
  <div class="content">
    <div class="contact-profile">
      <img src="https://www.drupal.org/files/profile_default.png" alt="Dsc 1809">
      <p>Chatroom test</p>
      <div id="close_chat">
        <a data-remote="true" href="/pages/close_chatroom?method=get">
          <div style="color:#435f7a; cursor:pointer;">
            <svg class="svg-inline--fa fa-window-close fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="window-close" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z"></path></svg>
            <!-- <i class="fas fa-window-close" aria-hidden="true"></i> -->
          </div>
        </a>
      </div>
    </div>
    <div class="messages panel-body" id="messages">
      <div class="panel panel-default">
        <ul id="msgs">

          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>You ready for Kenya?</p>
          </li>
          <li class="replies">
            <img src="/system/users/images/000/000/008/thumb/profile_picture.JPG?1519240015" alt="Profile picture">
            <p>whaddup
            </p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>lol</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>gretgr</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>rethgthyteh
            </p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>rewgergewrg</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>erqfwere</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>refsrtagrwt</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>brdsgergser</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>test lolollo</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>So my question; Is it neater to loose the "=== true" part in the future, or is it good practise to check the type of the variable as well.</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>Then, what Javascript will do is type coerce true to match the type of someVar and then compare the two variables. There are lots of situations where this is likely not what one would intend. Because of this, in most cases you want to avoid
              == because there's a fairly long set of rules on how Javascript will type coerce two things to be the same type and unless you understand all those rules and can anticipate everything that the JS interpreter might do when given two different
              types (which most JS developers cannot), you probably want to avoid == entirely.</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>m going to accept this answer because it works for my example. It still doesnt work for my actual app because I need to append an HTML string to the view node and appendChild needs a DOM node not a string</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>Then, what Javascript will do is type coerce true to match the type of someVar and then compare the two variables. There are lots of situations where this is likely not what one would intend. Because of this, in most cases you want to avoid
              == because there's a fairly long set of rules on how Javascript will type coerce two things to be the same type and unless you understand all those rules and can anticipate everything that the JS interpreter might do when given two different
              types (which most JS developers cannot), you probably want to avoid == entirely.</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p> dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essential</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>But this will only send the name attribute and its value for the specific input field, not the rest of the form input fields. What if I want to send all the form input fields to the server, how can I do that without a form button (I just want
              to tab out of the specified input field).</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>strhtyhh</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>test</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>erggrdgssggr</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>test</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>rthtdfhtftt</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>favssvsfsvdsdf</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>erfqerferqerqer</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>loool whats up</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>dssfgbhhg</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>fvdxfbfgsbbfg</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>test</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>sgresggstsrt</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>sgrrttgtg</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>sgrrttgtg</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>test</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>test</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>this should be one</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>this should be one</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>okay stop</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>okay stop</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>whaaaat</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>whaaaat</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>dammit</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p></p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>lafhjgefbjhe</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>dammit</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>two</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p></p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p></p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>gergaregera</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>hello world</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>hello</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>klhli</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>fuck</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p></p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>teeeeeest</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>okay fuck</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>okay whaat</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p></p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>hfgdhfgd</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>test</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>hgdhkgfk</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>fgdgfd</p>
          </li>
          <li class="sent"><img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384">
            <p>what</p>
          </li>
        </ul>
      </div>
      <div class="message-input">
        <form id="new_message" class="new_message" action="/messages" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="MRkySbssrxg5xE+AU7+38wbjAFRVnUzsJMLIm5fP0Lea4tXpvafDBXDvXiFS4Vt0crPyISFYtP5nayMsBzt+UA==">
          <textarea class="form-control chatinput" placeholder="Write a message..." data-textarea="message" required="required" name="message[content]" id="message_content"></textarea>
          <input value="5" type="hidden" name="message[chatroom_id]" id="message_chatroom_id">
          <button name="button" type="submit" class="chatmessagesubmit" id="register-button" data-disable-with="Please wait..." data-send="message">
        <svg class="svg-inline--fa fa-paper-plane fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="paper-plane" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"></path></svg><!-- <i class="fa fa-paper-plane" aria-hidden="true"></i> -->
</button>
        </form>


      </div>
    </div>

  </div>
</div>

最佳答案

因为 position:fixed 会将元素相对于文档而不是父元素固定......所以您需要在这里使用 position:absolute .. .

这里的想法是让 .messages div 的 height 等于 calc(100% - 60px) 和 position :relative 并将 position:absolute 应用于 .message-input div...

我还从您的代码中删除了不需要的 CSS...

body {
  margin: 0;
}

#frame {
  background: #E6EAEA;
  height: 100vh;
}

#frame .content {
  height: 100%;
  position: relative;
}

#frame .content .message-input {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ccc;
  padding: 10px 10px 5px;
}

#frame .content .contact-profile {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #f5f5f5;
}

#frame .content .contact-profile img {
  width: 40px;
  border-radius: 50%;
  float: left;
  margin: 9px 12px 0 9px;
}

#frame .content .contact-profile p {
  margin: 0;
}

#close_chat {
  font-size: 30px;
  margin: 0px 12px 12px 12px;
  position: absolute;
  top: 0;
  right: 0;
}

#frame .content .messages {
  width: 100%;
  height: calc(100% - 60px);
  position: relative;
}

.panel {
  height: calc(100% - 67px); /* here 67px is message input height */
}

#msgs {
  padding: 0px;
  overflow: auto;
  margin: 0;
  height: 100%;
}

#frame .content .messages ul li {
  display: inline-block;
  clear: both;
  float: left;
  margin: 15px 15px 5px 15px;
  width: calc(100% - 25px);
  font-size: 0.9em;
}

#frame .content .messages ul li.sent img {
  margin: 6px 8px 0 0;
}

#frame .content .messages ul li img {
  width: 22px;
  border-radius: 50%;
  float: left;
}

#frame .content .messages ul li.sent p {
  background: #435f7a;
  color: #f5f5f5;
}

@media screen and (min-width: 735px) #frame .content .messages ul li p {
  max-width: 300px;
}

#frame .content .messages ul li p {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 20px;
  max-width: 205px;
  line-height: 130%;
}

#frame .content .messages ul li.replies img {
  float: right;
  margin: 6px 0 0 8px;
}

#message_content {
  line-height: 13px;
  border: 1px solid #ced4da;
}

.chatinput {
  border: none;
  width: calc(100% - 52px);
  border-radius: 0;
  padding: 10px 30px 10px 10px;
  text-rendering: optimizeLegibility;
  font-size: 0.8em;
  color: #32465a;
  resize: none;
  box-sizing: border-box;
}

.chatmessagesubmit {
  border: none;
  padding: 12px;
  cursor: pointer;
  background: #32465a;
  color: #f5f5f5;
  vertical-align: top;
  height: 48px;
  width: 48px;
  font-size: 20px;
}
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div id="frame">
  <div class="content">
    <div class="contact-profile">
      <img src="https://www.drupal.org/files/profile_default.png" alt="Dsc 1809">
      <p>Chatroom test</p>
      <div id="close_chat">
        <a data-remote="true" href="/pages/close_chatroom?method=get">
          <div style="color:#435f7a; cursor:pointer;">
            <svg class="svg-inline--fa fa-window-close fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="window-close" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-83.6 290.5c4.8 4.8 4.8 12.6 0 17.4l-40.5 40.5c-4.8 4.8-12.6 4.8-17.4 0L256 313.3l-66.5 67.1c-4.8 4.8-12.6 4.8-17.4 0l-40.5-40.5c-4.8-4.8-4.8-12.6 0-17.4l67.1-66.5-67.1-66.5c-4.8-4.8-4.8-12.6 0-17.4l40.5-40.5c4.8-4.8 12.6-4.8 17.4 0l66.5 67.1 66.5-67.1c4.8-4.8 12.6-4.8 17.4 0l40.5 40.5c4.8 4.8 4.8 12.6 0 17.4L313.3 256l67.1 66.5z"></path></svg>
            <!-- <i class="fas fa-window-close" aria-hidden="true"></i> -->
          </div>
        </a>
      </div>
    </div>
    <div class="messages panel-body" id="messages">
      <div class="panel panel-default">
        <ul id="msgs">

          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>You ready for Kenya?</p>
          </li>
          <li class="replies">
            <img src="/system/users/images/000/000/008/thumb/profile_picture.JPG?1519240015" alt="Profile picture">
            <p>whaddup
            </p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>lol</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>gretgr</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>rethgthyteh
            </p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>rewgergewrg</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>erqfwere</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>refsrtagrwt</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>brdsgergser</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>test lolollo</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>So my question; Is it neater to loose the "=== true" part in the future, or is it good practise to check the type of the variable as well.</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>Then, what Javascript will do is type coerce true to match the type of someVar and then compare the two variables. There are lots of situations where this is likely not what one would intend. Because of this, in most cases you want to avoid
              == because there's a fairly long set of rules on how Javascript will type coerce two things to be the same type and unless you understand all those rules and can anticipate everything that the JS interpreter might do when given two different
              types (which most JS developers cannot), you probably want to avoid == entirely.</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>m going to accept this answer because it works for my example. It still doesnt work for my actual app because I need to append an HTML string to the view node and appendChild needs a DOM node not a string</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>Then, what Javascript will do is type coerce true to match the type of someVar and then compare the two variables. There are lots of situations where this is likely not what one would intend. Because of this, in most cases you want to avoid
              == because there's a fairly long set of rules on how Javascript will type coerce two things to be the same type and unless you understand all those rules and can anticipate everything that the JS interpreter might do when given two different
              types (which most JS developers cannot), you probably want to avoid == entirely.</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p> dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essential</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>But this will only send the name attribute and its value for the specific input field, not the rest of the form input fields. What if I want to send all the form input fields to the server, how can I do that without a form button (I just want
              to tab out of the specified input field).</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>strhtyhh</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>test</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>erggrdgssggr</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>test</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>rthtdfhtftt</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>favssvsfsvdsdf</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>erfqerferqerqer</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>loool whats up</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>dssfgbhhg</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>fvdxfbfgsbbfg</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>test</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>sgresggstsrt</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>sgrrttgtg</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>sgrrttgtg</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>test</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>test</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>this should be one</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>this should be one</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>okay stop</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>okay stop</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>whaaaat</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>whaaaat</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>dammit</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p></p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>lafhjgefbjhe</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>dammit</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>two</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p></p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p></p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>gergaregera</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>hello world</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>hello</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>klhli</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>fuck</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p></p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>teeeeeest</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>okay fuck</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>okay whaat</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p></p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>hfgdhfgd</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>test</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>hgdhkgfk</p>
          </li>
          <li class="sent">
            <img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384" alt="Img 8496">
            <p>fgdgfd</p>
          </li>
          <li class="sent"><img src="/system/users/images/000/000/002/thumb/IMG_8496.JPG?1520241384">
            <p>what</p>
          </li>
        </ul>
      </div>
      <div class="message-input">
        <form id="new_message" class="new_message" action="/messages" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="MRkySbssrxg5xE+AU7+38wbjAFRVnUzsJMLIm5fP0Lea4tXpvafDBXDvXiFS4Vt0crPyISFYtP5nayMsBzt+UA==">
          <textarea class="form-control chatinput" placeholder="Write a message..." data-textarea="message" required="required" name="message[content]" id="message_content"></textarea>
          <input value="5" type="hidden" name="message[chatroom_id]" id="message_chatroom_id">
          <button name="button" type="submit" class="chatmessagesubmit" id="register-button" data-disable-with="Please wait..." data-send="message">
        <svg class="svg-inline--fa fa-paper-plane fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="paper-plane" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"></path></svg><!-- <i class="fa fa-paper-plane" aria-hidden="true"></i> -->
</button>
        </form>


      </div>
    </div>

  </div>
</div>

关于html - div 的一个子元素可滚动到一个固定位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49227954/

上一篇：html - 如何使用 Bootstrap 顶部导航栏和侧边栏？

下一篇：javascript - 一次将 jQuery 事件应用到一个类

相关文章：

html - 溢出 :hidden not working on mobile App

python Tkinter() 如何隐藏用户界面

c++ - 在没有 QtDesigner 的情况下在 Qt 中自定义 QDockWidget

html - CSS 消除了 'bordered' 元素 Angular 上的 45deg 切割

javascript - 添加图像 URL 表单 - 使用 AJAX 预览图像

css - 在另一个上缩放 CSS3 <li> 元素

html - 将单个输入表单分成不同的部分

javascript - 在 JavaScript DOM 中拆分节点内容

javascript - 确定网页的宽度(以英寸为单位)

java - 使用库中的 fragment (android)

©2024 IT工具网  联系我们