スクロール領域外の要素

私はElectronでメッセージングアプリを作っています。私は、タイトルバーを過ぎてスクロールしながらメッセージをぼかすために背景フィルタを使用していますので、画面の中央で自分のdivの中に入れるのではなく、タイトルバーの後ろにメッセージを渡す必要があります。スクロール領域外の要素

ページがスクロールされていない場合、メッセージは期待どおりに動作します。ただし、ページの下部にはメッセージを入力するための下部バーが表示されます。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Chat</title> 
    <link rel="stylesheet" href="css/chat.css" /> 
    <script src="js/chatWindow.js"></script> 
</head> 
<body> 
    <div class="header"> 
     <span class="name">Room Name</span> 
    </div> 
    <div class="messageBar"> 
     <input id="messageBox" type="text" placeholder="Enter a message..." /> 
     <div class="sendBtn">Send</div> 
    </div> 
    <div class="messageList"></div> 
</body> 
</html>

CSS

@font-face { 
    font-family: "Roboto Light"; 
    font-style: "normal"; 
    font-weight: 400; 
    src: url("fonts/Roboto-Light.ttf") format("truetype"); 
} 
body { 
    background-color: white; 
    font-family: "Roboto Light"; 
    padding: 45px 0px; 
} 

.header { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 45px; 
    z-index: 100; 
    background-color: rgba(56, 92, 254, 0.75); 

    display: flex; 
    text-align: center; 
    justify-content: center; 
    align-items: center; 

    backdrop-filter: blur(3px); 
    -webkit-backdrop-filter: blur(3px); 
    -webkit-app-region: drag; 
} 
.header span { 
    font-weight: bold; 
} 

.messageBar { 
    position: fixed; 
    top: calc(100% - 45px); 
    left: 0px; 
    width: 100%; 
    height: 45px; 
    z-index: 100; 
    background-color: rgba(57, 93, 255, 0.75); 

    padding: 0px; 

    display: flex; 
    text-align: center; 
    justify-content: center; 
    align-items: center; 
    vertical-align: middle; 

    backdrop-filter: blur(3px); 
    -webkit-backdrop-filter: blur(3px); 
} 

#messageBox { 
    width: 90%; 
    height: 100%; 
    background-color: rgba(255,255,255,0.5); 

    font-size: 1em; 

    margin: none; 
    border: none; 
    padding: 0px 5px 0px 5px; 
} 
#messageBox::-webkit-input-placeholder { 
    color: dimgray; 
} 

.sendBtn { 
    float: right; 
    width: 10%; 
    height: 100%; 
    padding: 0px 3px; 
    line-height: 45px; 

    transition: 0.2s; 
} 
.sendBtn:hover { 
    background-color: rgba(0,0,0,0.25); 
} 

.messageList { 
    width: 100%; 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 
.message { 
    display: block; 
    width: auto; 
    max-width: 50%; 
    border-radius: 10px; 
    padding: 4px; 
    margin: 5px 0px; 
    box-sizing: border-box; 

    background-color: lightblue; 
    overflow-wrap: break-word; 
    float: left; 
    clear: both; 
} 
.message.mine { 
    float: right; 
    background-color: lightgreen; 
}

誰もがこの問題を解決する方法を知っていますか？何が起きているのかの例はCodePenです。どんな助けでも大歓迎です！

出典

2017-11-08 Romejanic

あなたはあなたの '.message：last-child'に下限を設定しようとしましたか？ –

ヘッダーとフッターの位置を使用した場合は、中央のボックスにも使用できます。 '.messageList { width：100％; 位置：固定; top：45px; 下段：45px; オーバーフロー：自動; } 'または代わりに表示を伴う別のレイアウト方法を使用する –

t3__rry修正しました。ありがとうございました！ – Romejanic

このjavascriptコードを試してみてください。

window.addEventListener("load", function(){ 

    var messageList = document.querySelector(".messageList"); 
    var messageBox = document.getElementById("messageBox") 
    var sendBtn = document.querySelector(".sendBtn"); 

    for(var i = 0; i < 100; i++) { 
     var content = "Message body: " + i + "\nThe quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog."; 
     createMessageBubble(content, Math.random() > 0.5); 
    } 

    sendBtn.onclick = function() { 
     var message = messageBox.value; 
     messageBox.value = ""; 
     if(!message || message.length <= 0) { 
      return; 
     } 
     createMessageBubble(message, true); 
     // TODO: actually send the message 
    }; 

    function createMessageBubble(content, isUser) { 
     var el = document.createElement("div"); 
     el.classList.add("message"); 
     if(isUser) { 
      el.classList.add("mine"); 
     } 
     el.innerText = content; 
     messageList.appendChild(el); 
    } 
    var div = document.createElement("div"); 
    div.style.width = "100%"; 
    div.style.height = "45px"; 
    div.style.float = "left"; 
    messageList.parentNode.appendChild(div); 
});

出典

2017-11-08 11:33:30

私はこれを試して、実際には動作しませんでした。私は、各メッセージのlast-childにマージンを追加しました。とにかくありがとう：） – Romejanic

スクロール領域外の要素

答えて

関連する問題