我刚刚学习如何使用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>
答案 0 :(得分：1)
这是你想要的吗？
.notification_wrapper {
margin-left: 20px;
margin-right: 10px;
float: left;
position: relative;
}
.notification_wrapper .dropdown_notification .bell {
cursor: pointer;
}
.notification_wrapper .dropdown_notification .notification_count span {
color: #fff;
background-color: #e5e5e5;
border-radius: 4px;
font-size: 12px;
padding: 4px 8px;
z-index: 99;
}
.notification_count span {
margin-left: 15px;
cursor: pointer;
z-index: 99;
}
.notification_wrapper .dropdown_notification .notification_count span.unopened {
background-color: #f87880;
}
.notification_wrapper.open .notification_list_wrapper {
display: block;
}
.notification_wrapper .notification_list_wrapper {
display: none;
z-index: 999;
width: 330px;
height: 500px;
border: 1px solid #e5e5e5;
position: absolute;
top: calc(100% + 20px);
right: -10px;
background-color: #fff;
}
.notification_wrapper .notification_list_wrapper .notification_header_wrapper {
position: relative;
width: 330px;
height: 37px;
border-bottom: 1px solid #e5e5e5;
box-sizing: border-box;
background-color: #fff;
}
.notification_wrapper .notification_list_wrapper .notification_header_wrapper .notification_header_title {
position: absolute;
top: 4px;
left: 10px;
font-size: 14px;
}
.notification_wrapper .notification_list_wrapper .notification_header_wrapper .notification_header_menu {
position: absolute;
top: 4px;
right: 10px;
font-size: 14px;
}
.notification_wrapper .notification_list_wrapper .notifications {
position: relative;
width: 330px;
height: calc(500px - 37px - 37px);
overflow: scroll;
}
.notification_wrapper .notification_list_wrapper .notification_link_wrapper {
position: absolute;
bottom: 0;
width: 330px;
height: 26px;
border-top: 1px solid #e5e5e5;
padding: 4px 0 8px 0;
text-align: center;
background-color: #fff;
z-index: 2;
}
.notification_wrapper .notification_list_wrapper .notification_link_wrapper:hover {
background-color: #f8f9fb;
}
.notification_wrapper .notification_list_wrapper .notification_link_wrapper .notification_link {
text-align: center;
font-size: 14px;
}
.tabtitle {
font-size: 1vw;
}
.center {
text-align: center;
}
.oval-cell {
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
border-radius: 50px;
width: 100%;
background: $primary;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 15px;
padding-left: 15px;
}
.cell-activity_name {
margin-right: 10px;
}
.cell-profile_name {
margin-right: 20px;
}
.myactivitiesmenu.show {
height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
#frame {
width: calc(100% + 30px);
min-width: 360px;
height: 92vh;
min-height: 300px;
background: #E6EAEA;
max-width: 100%;
,:
}
@media screen and (max-width: 360px) {
#frame {
width: 100%;
height: 100vh;
}
}
#frame .content {
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% - 40px);
max-height: calc(100% - 40px);
overflow: scroll;
}
@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 {
width: 100%;
z-index: 99;
bottom: 76px;
}
#frame .content .message-input form:after {
content: '';
clear: both;
display: block;
}
#frame .content .message-input .wrap {
position: relative;
}
.chatinput {
float: left;
border: none;
width: calc(100% - 80px);
border-radius: 0;
padding: 5px 32px 5px 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;
}
.chatmessagesubmit:hover {
background: #435f7a;
}
.section-year {
float: right;
width: 48%;
}
.section-college {
width: 48%;
}
#msgs {
padding: 0px;
overflow: auto;
height: fit-content;
overflow: hidden;
}
#message_content {
line-height: 13px;
border: 1px solid #ced4da;
}
.panel {
overflow: hidden;
/* margin-bottom: 60px; */
position: relative;
z-index: 999;
}
#close_chat {
float: right;
font-size: 30px;
margin: 0px 12px 12px 12px;
}
body {
margin: 0;
}<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 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>
答案 1 :(得分：1)
因为position:fixed会将元素相对于文档而不是父元素....所以你需要在这里使用position:absolute ...
我们的想法是height .messages div等于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>
答案 2 :(得分：0)
您需要将div放在相对div中。根据需要给孩子宽度和高度，并且可以滚动溢出。并放置一个绝对位置和底部位置的按钮：0
<div class="parent">
<div class="child">
</div>
<button>Click</button>
</div>
SASS
.parent{
position:relative
.child{
width: 300px;
height: 500px;
overflow: scroll;
padding-bottom: 20px;
}
button{
width: 300px;
height:20px;
position:absolute;
bottom:0;
}
}