时间戳

首页 > 解决方案 > 如何让输入栏粘在 div 容器的底部？

javascript - 如何让输入栏粘在 div 容器的底部？

问题描述

我试图让输入栏留在 div 容器的底部，但我不知道如何做到这一点。有什么帮助吗？

import React, { Component } from 'react';
import './App.css';
import './NameBox';

class ChatBox extends Component {
    render() {
        return (
            <div>
                <div className="chat-box-container">
                    <div className="chat-box">
                        <h1>Chat Room</h1>
                        <div style={{/*GET THIS TO STICK TO BOTTOM OF THE DIV ABOVE*/}}>
                            <div className="input-group mb-3">
                                <input id="name" type="text" class="form-control" placeholder="Name"/>
                                <div className="input-group-append">
                                    <a href="/chat" onClick={this.getName} className="btn btn-success" type="button">Enter</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <p>{localStorage.getItem("username")} has entered the chat...</p>
            </div>
        );
    }
}

export default ChatBox;

标签： javascripthtmlreactjs

解决方案

我知道您的代码在 React 和 JSX 中，但只是作为一般答案。要相对于div定位某些内容，您需要提供父 div position: relative，然后对于输入栏，您可以将输入栏放置在底部。position: absolutebottom: 0

<div style="
    position: relative; 
    width: 200px; 
    height: 200px;
    border: 1px solid black;"
>
    <input type="text" 
        style="
           position: absolute;
           bottom: 0;"
        placeholder="Entry Bar"
    />
</div>

推荐阅读