css

Question

我正在尝试实现类似于slack的消息表示方式，其中textarea总是在底部，消息总是在textarea之上

使用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上显示，它将位于底部，向下滚动时，它将开始向上移动。同样尝试将height用作calc(100% - 18px)到message-box来限制card的div上的高度也是行不通的。

Answer 1

由于overflow没有message-box属性（为其提供了默认的 visible 属性），因此向下滚动将导致父元素的滚动，即chat元素。这样会导致textarea向上移动。

解决问题的方法很简单，只需在message-box元素中添加 overflow-y：auto 。

更新：高度也必须从(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>

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

css

结果截图

1 个答案: