引导模式上的粘性图标或页脚

Question

我的粘页脚遇到了问题。我有这个模态，我想在里面有一个粘性 div。该模式有一个带有溢出的输入，我想要实现的基本上是这样的： 在移动设备上，将 div 放在最底部。我使用了这里找到的一些答案，但我认为它们不能满足我的需求。我希望当有人专注于输入区域（因为键盘显示在手机上）时，使 div 位于键盘上方

这是我当前的代码：

   <Modal
        show={show}
        onHide={() => setShow(false)}
        centered
        fullscreen="lg-down"
      >
        <div className="sticky-container"> {/* I want this to be sticky at the bottom lets say*/}</div>
        <Modal.Header closeButton>
          <Modal.Title> Create a post </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div>
            <div className="blog-form p-3">
              <Form onSubmit={addBlog}>
                <Row className="mb-1 body-container">
                  <Row>
                    <Form.Group
                      as={Col}
                      className="mb-3"
                      controlId="blog-description"
                    >
                      <Form.Control
                        className="description-input"
                        style={descriptionFont}
                        value={description}
                        as="textarea"
                        // Adjust the number of rows as needed
                        placeholder={placeholder}
                        onChange={(event) => handleTextAreaChange(event)}
                        autoFocus
                      />
                    </Form.Group>
                  </Row>
                  <Row>
                    <Col>
                      another div here
                    </Col>
                  </Row>
                </Row>
               
              </Form>
            </div>
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button type="submit" onClick={addBlog}>
            Submit
          </Button>
        </Modal.Footer>
      </Modal>
    </>

当前样式：

.blog-form {
  max-height: 500px;
  overflow-y: auto;
}

.blog-form textarea {
  width: 100%;

  /* Set a minimum height for the textarea */

  resize: none; /* Disable manual resizing */
  overflow-y: auto;
}

.body-container {
  padding-top: 10px;
  display: flex;
  overflow-y: auto;
}

.sticky-container {
  height: 40px;
  background-color: blue;
  position: sticky;
  bottom: 0;
  z-index: 1055;
}

参见 stackblitz

Answer 1

我不确定引导程序的模式，但你可以尝试这样的事情：

        .container {
            width: 300px; /* Adjust the width as needed */
            height: 400px; /* Adjust the height as needed */
            border: 1px solid #ccc;
            
            position: relative; /* Make the container a positioning context */
        }

        /* Body styles */
        .body {
            height: 100%;
            overflow-y: scroll; /* Enable vertical scrolling for the body */
            padding: 10px; /* Add padding to create content within the body */
        }

        /* Sticky div styles */
        .sticky-div {
            position: sticky;
            bottom: 0;
            background-color: #f0f0f0; /* Background color for the sticky div */
            padding: 10px; /* Add padding to the sticky div */
        }
    

Jsfiddle