如何修復div高度

我正在開發一個聊天控件應用程序，我的問題是這樣的。如何修復div高度

我輸入文字，這是用來做REST調用，得到響應，並將其添加到聊天窗口。

目前我的問題是這樣的，在聊天窗口越來越大，頁面獲取滾動與聊天框（格）一起。有人可以讓我知道如何在整個頁面中停止這個增量。

簡而言之，我的要求是聊天窗口的初始高度爲X，用戶詢問查詢，響應進入聊天窗口，用戶詢問另一個，發生同樣的事情，但頁面應該沒有滾動，而是聊天窗口應該（這已經發生在我的代碼中）。

以下是我的代碼。

<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" 
    content="width=device-width, initial-scale=1, maximum-scale=1" /> 
<meta name="description" content="" /> 
<meta name="author" content="" /> 

<link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script 
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<!--[if IE]> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <![endif]--> 
<title>Bootstrap Chat Box Example</title> 
<!-- BOOTSTRAP CORE STYLE CSS --> 
<link href="assets/css/bootstrap.css" rel="stylesheet" /> 
<!-- FONT AWESOME CSS --> 
<link href="assets/css/font-awesome.css" rel="stylesheet" /> 
<!-- CUSTOM STYLE CSS --> 
<link href="assets/css/style.css" rel="stylesheet" /> 

<script type="text/javascript" src="assets/js/jquery.min.js"></script> 
<script type="text/javascript"> 
    // jQuery Document 

    $(document).keypress(function(e) { 
     if (e.which == 13) { 
      $("#submitmsg").click(); 
     } 
    }); 

    $(document).ready(function() { 
     $('#submitmsg').bind('click', function() { 
      var message = $('#usermsg').val(); 
      $('#chatbox').append('<p>' + message + '</p>'); 
      $('#usermsg').val(''); 
      //alert(message); 

     }); 
    }); 

    function serverResponse(message) { 
     $('#chatbox').append('<p>Server: ' + message + '</p>'); 
    } 

    $("#submitmsg") 
      .click(
        function() { 
         alert("Hi"); 
         var inputtedText = $("#usermsg").val(); 
         var params = {}; 

         var controllerUrl = 'https://westus.api.cognitive.microsoft.com/qnamaker/v1.0/knowledgebases/bde3c190-58bd-40d8-9ff1-c35eb18588be/generateAnswer'; 
         $.ajax({ 
          url : controllerUrl, 
          type : 'POST', 
          data : { 
           "question" : inputtedText 
          }, 
          beforeSend : function(xhrObj) { 
           // Request headers 
           xhrObj.setRequestHeader(
             "Ocp-Apim-Subscription-Key", "MyKey"); 
           xhrObj.setRequestHeader('Content-Type', 
             'application/json; charset=UTF-8'); 

          }, 
          success : function(data) { 
           var dataObj = data; 
           alert('Data:' + JSON.stringify(dataObj)); 
           $('#resultvalue').html(data); 
           serverResponse(JSON.stringify(dataObj)); 
           alert(data); 
          } 
         }); 
        }); 
</script> 


</head> 
<body> 

    <nav class="menu"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <div class="back"> 
        <img src="acn.jpg" draggable="false" /> 
       </div> 
       <div class="name">My Bot</div> 
      </div> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"><span class="glyphicon glyphicon-user"></span> 
         User Name</a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> 
         Logout</a></li> 
      </ul> 
     </div> 
    </nav> 
    <br /> 
    <br /> 
    <br /> 
    <div class="container"> 
     <div class="row pad-top pad-bottom"> 
      <div class="col-lg-3 col-md-3 col-sm-3"> 
       <div class="chat-box-new-div"> 
        <div class="chat-box-new-head">Compliance Avatar</div> 
        <div class="panel-body chat-box-new"> 

         <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 
         <br /> <br /> <br /> <br /> 

        </div> 
       </div> 
      </div> 
      <div class=" col-lg-6 col-md-6 col-sm-6"> 
       <div class="chat-box-div"> 
        <div class="chat-box-head"> 
         CHAT HISTORY 
         <div class="btn-group pull-right"> 
          <button type="button" class="btn btn-info dropdown-toggle" 
           data-toggle="dropdown" aria-expanded="false"> 
           <span class="fa fa-cogs"></span> <span class="sr-only">Toggle 
            Dropdown</span> 
          </button> 
          <ul class="dropdown-menu" role="menu"> 
          </ul> 
         </div> 
        </div> 
        <div class="panel-body chat-box-main"> 
         <div class="chat-box-left">Hello, Welcome!. You can ask me 
          questions on Compliance Policy ..</div> 
         <div class="chat-box-name-left"> 
          <img src="compiler-bot-static.gif" 
           alt="bootstrap Chat box user image" class="img-circle" /> - Bot 
         </div> 
         <hr class="hr-clas" /> 
         <div class="chat-box-right" id="chatbox"></div> 
         <div class="chat-box-name-right"> 
          <img src="smiley.jpg" alt="bootstrap Chat box user image" 
           class="img-circle" /> - You 
         </div> 

        </div> 
        <div class="chat-box-footer"> 
         <div class="input-group"> 
          <input type="text" class="form-control" 
           placeholder="Enter Text Here..." id="usermsg"> <span 
           class="input-group-btn"> 
           <button class="btn btn-info" type="button" id="submitmsg">SEND</button> 
          </span> 
         </div> 
        </div> 

       </div> 

      </div> 
      <div class="col-lg-3 col-md-3 col-sm-3"> 
       <div class="chat-box-new-div"> 
        <div class="chat-box-new-head">Frequently Asked Questions .. 
        </div> 
        <div class="panel-body chat-box-new"> 
         <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 
         <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 
         <br /> <br /> <br /> 
        </div> 
       </div> 
      </div> 
     </div> 

     <!-- USING SCRIPTS BELOW TO REDUCE THE LOAD TIME --> 
     <!-- CORE JQUERY SCRIPTS FILE --> 
     <script src="assets/js/jquery-1.11.1.js"></script> 
     <!-- CORE BOOTSTRAP SCRIPTS FILE --> 
     <script src="assets/js/bootstrap.js"></script> 
</body> 

</html>

我的CSS：

.hr-clas { 
    border-top: 1px solid #A12EB3; 
} 

.chat-box-main { 
    max-height:500px; 
    overflow:auto; 
} 
.chat-box-div { 
    border:2px solid #A12EB3; 
    border-bottom:2px solid #A12EB3; 
} 
.chat-box-head { 
    padding: 10px 15px; 
border-bottom: 2px solid #A12EB3; 
background-color: #B25AE5; 
color: #fff; 
text-align: center; 

} 

.chat-box-left { 
    width: 100%; 
    height: auto; 
    padding: 15px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    position: relative; 
    border: 1px solid #C5C5C5; 
    font-size:12px; 
} 
.chat-box-left:after { 
    top: 100%; 
    left: 10%; 
    border: solid transparent; 
    content: " "; 
    position: absolute; 
    border-top-color: #C5C5C5; 
    border-width: 15px; 
    margin-left: -15px; 
} 

.chat-box-name-left { 
    margin-top: 30px; 
    margin-left: 60px; 
    text-align:left; 
    color:#049E64; 
} 
    .chat-box-name-left img { 
     max-width:40px; 
     border: 2px solid #049E64; 
    } 

    .chat-box-right { 
    width: 100%; 
    height: auto; 
    padding: 15px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    position: relative; 
    border: 1px solid #C5C5C5; 
    font-size:12px; 
} 
.chat-box-right:after { 
    top: 100%; 
    right: 10%; 
    border: solid transparent; 
    content: " "; 
    position: absolute; 
    border-top-color: #C5C5C5; 
    border-width: 15px; 
    margin-left: -15px; 
} 

.chat-box-name-right { 
    color: #354EA0; 
    margin-top: 30px; 
    margin-right: 60px; 
    text-align:right; 
} 

.chat-box-name-right img { 
     max-width:40px; 
     border: 2px solid #354EA0; 
    } 
.chat-box-footer { 
    background-color: #D8D8D8; 
padding: 10px; 
}

請讓我知道我怎麼能解決這個問題。

當前問題圖片。

當頁面加載

我送Hi後輸入

感謝

來源

2017-01-11 user3872094

設置固定高度並使用溢出：滾動; –

你可以把你所有的sytlesheets的絕對路徑？ –

鑑於你的描述上面類似下面應該工作（非常簡化）

<div id="chatContainer"> 
    <div style="height:400px; overflow-y:auto;"> 
    <!-- YOUR CHAT CONTENT GOES HERE --> 
    </div> 

    <textarea id="HaveYourSay"></textarea> 
    <button onclick="SendChat()">Send</button> 
</div>

在將滾動條應用於側面之前，這將允許div的內容達到400px的高度。

伊夫沒有使用你的HTML，但一直保持上述簡單的例子，這樣就可以將其應用到自己的應用程序。

退房的JS小提琴：https://jsfiddle.net/6nep283h/1/

注意，我這裏使用的內嵌樣式簡單 - 我woudln't建議您在應用程序中使用它們。

來源

2017-01-11 12:07:02 5NRF

試試這個代碼門戶

.chat-box-main{ 
    height:200px; 
    overflow-y:scroll; 
}

來源

2017-01-11 12:10:28

替換這個類，如下

 .chat-box-div { 
 
     border:2px solid #A12EB3; 
 
     border-bottom:2px solid #A12EB3; 
 
     max-height:400px ; 
 
    }

來源

2017-01-11 12:12:32

試試這個

.chat-box-main { 
    max-height: 500px; 
    overflow-y:scroll; 
}

來源

2017-01-11 12:15:09 grinmax

如何修復div高度

回答

相關問題