Question

成功保存表单后，该消息将显示在屏幕右侧的固定div中，该消息是从服务器端动态获取的，当内容较短时，这种情况不是问题，而是当只要就我而言，我无法向下滚动以查看固定div的最后一个内容。

HTML：

<div id="assistant-container">
   <div class="message">
     <div class="assistant show">
      <table><tbody>
        <tr><td><span id="icon" class="icon-check"></span>
        </td><td>
          <span class="texte">Fiche enregistrée<br>
        <br>Il faudrait au moins une méthode d'intégration pour : <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - 
        <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - 
        <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - 
        <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - 
        <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> -
        <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br> - <br>
        - <br> - <br> - <br><br>Il faudrait sélectionner au moins une règle d'intégration directe pour : 
        <br>BKCHF - Commissions et frais bancaires<br><br></span></td></tr></tbody>
      </table>
     </div>
   </div>
</div>

CSS：

#assistant-container {
    position: fixed;
    visibility: hidden;
    font-family: Verdana,arial,helvetica,sans-serif;
    overflow-x: hidden;
    z-index: 199;
    width: 50%;
    top: 10%;
    max-height: 87%;
    height: 100vh;
    right: 0px;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

.message {
    position: fixed;
    margin-top: 20px;
    right: 20px;
    width: 100%;
    min-width: 210px;
    max-width: 500px;
    background-color:gray;
}

.assistant.show {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.assistant {
    box-sizing: border-box;
    padding: 15px 20px 15px 20px;
    min-width: 170px;
    max-width: 350px;
    border-radius: 8px;
    background-color: white;
    color: #868687;
    font-size: 12px;
    box-shadow: 2px 2px 8px 3px rgba(160, 160, 160, 0.15);
    margin-bottom: 20px;
    display: inline-block;
    float: right;
    vertical-align: top;
    line-height: 20px;
    transform: translateX(20%);
    opacity: 0;
    visibility: hidden;
    word-break: break-word;
}

jsbin：https://jsbin.com/yexiqevole/1/edit

注意：HTML的结构不能更改，因为它不是我的个人项目，只有CSS可以修改。

Answer 1

请将#assistant-container的宽度更新为width: 100%;将解决您的问题。

#assistant-container {
    position: fixed;
    visibility: hidden;
    font-family: Verdana,arial,helvetica,sans-serif;
    overflow-x: hidden;
    z-index: 199;
    width: 100%;
    top: 10%;
    max-height: 87%;
    height: 100vh;
    right: 0px;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    background-color: green;
}


.assistant {
    box-sizing: border-box;
    padding: 15px 20px 15px 20px;
    min-width: 170px;
    max-width: 350px;
    border-radius: 8px;
    background-color: white;
    color: #868687;
    font-size: 12px;
    box-shadow: 2px 2px 8px 3px rgba(160,160,160,0.15);
    margin-bottom: 20px;
    display: inline-block;
    float: right;
    vertical-align: top;
    line-height: 20px;
    transform: translateX(20%);
    opacity: 0;
    visibility: hidden;
    word-break: break-word;
    height: calc(100vh - 80px);
    overflow-y: scroll;
}

IE + Chrome-位置：固定儿童的内容隐藏在位置：固定父母

1 个答案: