代码之家 › 专栏 › 技术社区 › Sam B.

在html分离中实现消息和文本区域/输入布局

twitter-bootstrap css

Sam B. · 技术社区 · 7 年前

我正在尝试实现类似于Slack的消息表示的东西,其中文本区域始终位于底部,消息始终位于文本区域的上方

使用boostrap,这样html

<div id="chat" class="container top-padding">
    <div class="col-md-12" id="message-box">
        <div class="card">
            <div class="card-body">
                Message 1
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                Message 2
            </div>
        </div>

        ...
    </div>
    <textarea class="form-control col-md-12" id="text-box"></textarea>
</div>

CSS

.top-padding {
    padding-top: 10px;
}

#chat .card {
    margin-bottom: 5px;
}

#text-box {
    position: absolute;
    bottom: 8px;
    width: 88%;
}

#message-box {
    height: calc(100% - 18px);
}

结果截图

这显示了 position absolute 在文本区域和底部 10px 它将在底部,当您向下滚动时,它将开始向上移动。也尝试使用高度作为 calc(100% - 18px) 到 message-box 限制div的高度 card S也不起作用。

1 回复 | 直到 7 年前

dedman 7 年前

因为没有 overflow 财产 message-box (导致违约 看得见的 属性),向下滚动将导致父元素的滚动,即 chat 元素。这将导致移动 textarea 向上。

你的问题的解决方法很简单,只要加上 溢出-Y:自动 到 消息框 元素。

更新: 高度也必须从 (100% - 18px) 到 (100vh - 90px) ,请注意 % 到 vh .查看下面更新的代码片段:

<style>
.top-padding {
    padding-top: 10px;
}

#chat .card {
    margin-bottom: 5px;
}

#text-box {
    position: absolute;
    bottom: 8px;
    width: 88%;
}

#message-box {
    overflow-y: auto;
    height: calc(100vh - 90px);
}
</style>

<html>
    <head>
        <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    </head>
    <body>
        <div id="chat" class="container top-padding">
            <div class="col-md-12" id="message-box">
                <div class="card">
                    <div class="card-body">
                        Message 1
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        Message 2
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        Message 3
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        Message 4
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        Message 5
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        Message 6
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        Message 7
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        Message 8
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        Message 9
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        Message 10
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        Message 11
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        Message 12
                    </div>
                </div>
            </div>
            <textarea class="form-control col-md-12" id="text-box"></textarea>
        </div>
    </body>
</html>