1

我正在尝试创建具有固定位置的边聊的用户界面。我的问题是每个部分的高度（聊天标题、主体和输入字段）不是透视和比例的。如何使用百分比使它们以在调整页面大小时会调整的方式对齐？

我的 HTML 代码：

<div id="chatContainer" class="chatContainer">
    <div class="chatWrapper">
        <div class="chatHeader">
            <a href="javascript:void(0)" class="chatCloseBtn" onclick="closeChat()">&#10006;</a>
            <div class="chatTitle">FortniteProSnipes Public Chat</div>
            <div class="chatSubText">This is a general chat for all members of FortniteProSnipes</div>
        </div>
        <div class="chatBox">
            trgr: grtgrt<br>
            trgr: grtgrt<br>
            trgr: grtgrt<br>
            trgr: grtgrt<br>        
            trgr: grtgrt<br>
            trgr: grtgrt<br>
        </div></div>
        <input type="text" class="chatInputBox" name="chat-message" />
    </div>
</div>

带有聊天框的 Javascript：

<script>
function openNav() {
    if(window.innerHeight > window.innerWidth) {
        // Mobile friendly section
        document.getElementById("chatContainer").style.width = "100%";
    } else {
        document.getElementById("chatContainer").style.width = "450px";
    }
}

function closeChat() {
    document.getElementById("chatContainer").style.width = "0";
}
</script>

聊天框样式：

.chatHeader {
    height: 20%;
    border-bottom: 2px solid DarkOrange;
}
.chatContainer {
    height: calc(100vh - 92px);
    width: 0;
    position: fixed;
    z-index: 1;
    top: 92px;
    left: 0;
    background-color: rgba(0,0,0,0.8);
    overflow-x: hidden;
    transition: 0.5s;
    white-space: nowrap;
}
.chatWrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.chatBreak {
    color: DarkOrange;
    background-color: #ee7600;
    width: 100%;
    border: none;
    height: 2px;
}
.chatTitle {
    color: white;
    font-family: BurbankBigCondensed-Black;
    font-size: 24px;
    padding-left: 20px;
    padding-right: 20px;
}
.chatCloseBtn {
    font-family: BurbankBigCondensed-Black;
    color: white;
    font-size: 24px;
    position: absolute;
    right: 20px;
    transition: all 0.20s linear;
}
.chatCloseBtn:hover {
    color: rgba(255,255,255,0.6);
}
.chatBox {
    padding: 20px;
    overflow-y: scroll;
    border-top: 2px solid grey;
    border-bottom: 2px solid grey;
    min-height: calc(75% - 42px);
}
.chatSubText {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 18px;
    color: #BEBEBE;
    font-family: BurbankBigCondensed-Black;
}
.chatInputBox {
    position: absolute;
    bottom: 0;
    width: calc(100% - 20px);
    padding: 10px;
    background: rgba(0,0,0,0.3);
    border: none;
    border-top: 2px solid DarkOrange;
    border-bottom: 2px solid DarkOrange;
    font-size: 18px;
    color: white;
    min-height: calc(5% - 4px);
}

工作 JSFiddle：http: //jsfiddle.net/z5t9pj8r/

如果我要更改实际页面的高度，我需要按比例显示聊天内容，并且没有元素重叠。我认为文本可能需要从 px 更改为 vh 或 % 或其他东西也要成比例。我不太确定什么时候让一切都成比例。任何帮助都会得到帮助。

4

1 回答 1

-1

码笔.io

function openChat() {
   document.getElementById("chatContainer").style.display = "block";
}

function closeChat() {
    document.getElementById("chatContainer").style.display = "none";
}
.chatContainer {
    display: none;
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 1;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    transition: 0.5s;
    box-sizing: border-box;
}

@media only screen and (min-width: 1200px) {
    .chatContainer {
        max-width: calc(100vw / 3);
        height: 100%;
    }
}

.chatWrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chatHeader {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid DarkOrange;
    padding: 20px;
    box-sizing: border-box;
    min-height: 115px;
}

.chatCloseBtn {
    order: 2;
    font-family: BurbankBigCondensed-Black;
    color: white;
    font-size: 24px;
    text-decoration: none;
    transition: all 0.20s linear;
    margin-left: auto;
}

.chatCloseBtn:hover {
    color: rgba(255, 255, 255, 0.6);
}

.chatTitle {
    order: 1;
    flex-grow: 1;
    margin: 0;
    color: white;
    font-family: BurbankBigCondensed-Black;
    font-size: 24px;
    max-width: 90%;
}

.chatSubText {
    order: 3;
    font-size: 18px;
    color: #BEBEBE;
    width: 100%;
    margin: 0;
    padding: 10px 0;
}

.chatBreak {
    color: DarkOrange;
    background-color: #ee7600;
    width: 100%;
    border: none;
    height: 2px;
}

.chatBox {
    padding: 20px;
    overflow-y: scroll;
    border-top: 2px solid grey;
    border-bottom: 2px solid grey;
    flex-grow: 1;
    box-sizing: border-box;
}

.chatInputBox {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-top: 2px solid DarkOrange;
    border-bottom: 2px solid DarkOrange;
    font-size: 18px;
    color: white;
    resize: none;
}
<button onclick="openChat()">Open Chat</button>

<section id="chatContainer" class="chatContainer">
    <div class="chatWrapper">
        
        <header class="chatHeader">
            <a href="javascript:void(0)" class="chatCloseBtn" onclick="closeChat()">&#10006;</a>
            <h1 class="chatTitle">
                FortniteProSnipes Public Chat
            </h1>
            <p class="chatSubText">
                This is a general chat for all members of FortniteProSnipes
            </p>
        </header>
        
        <div class="chatBox">
            trgr: grtgrt<br>
            trgr: grtgrt<br>
            trgr: grtgrt<br>
            trgr: grtgrt<br>
            trgr: grtgrt<br>
            trgr: grtgrt<br>
            trgr: grtgrt<br>
            trgr: grtgrt<br>
            trgr: grtgrt<br>
            trgr: grtgrt<br>
            trgr: grtgrt<br>
            trgr: grtgrt<br>        
            trgr: grtgrt<br>
            trgr: grtgrt<br>
        </div>
        
        <textarea class="chatInputBox" name="chat-message"></textarea>
    </div>
</section>

于 2018-11-12T21:52:05.800 回答