Html：页脚和长表单重叠答案

【问题标题】：Html: The page footer and a long form get overlappedHtml：页脚和长表单重叠
【发布时间】：2020-09-17 21:22:54
【问题描述】：

我使用的是ready-made template，因为我的 css/html 技能非常简陋，而且我更擅长后端开发。

这是预定义的登录页面：

在我基于预定义登录页面创建的注册页面（包含更多字段）中： 注意页脚是如何与表单混淆的。
这是html代码：

 <>
      <ExamplesNavbar />
      <div
        className="page-header"
        style={{
          backgroundImage: "url(" + require("assets/img/login-image.jpg") + ")",
        }}
      >
        <div className="filter" />
        <Container>
          <Row>
            <Col className="ml-auto mr-auto" lg="4">
              <Card className="card-register ml-auto mr-auto">
                <h3 className="title mx-auto">Welcome</h3>
                <div className="social-line text-center">
                  <Button
                    className="btn-neutral btn-just-icon mr-1"
                    color="facebook"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-facebook-square" />
                  </Button>
                  <Button
                    className="btn-neutral btn-just-icon mr-1"
                    color="google"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-google-plus" />
                  </Button>
                  <Button
                    className="btn-neutral btn-just-icon"
                    color="twitter"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-twitter" />
                  </Button>
                </div>
                <Form className="register-form">
                  <label>First name</label>
                  <Input placeholder="First name" type="text" />
                  <label>Surname</label>
                  <Input placeholder="Surname" type="text" />
                  <label>Email</label>
                  <Input placeholder="Email" type="text" />
                  <label>Password</label>
                  <Input placeholder="Password" type="password" />
                  <label>Confirm password</label>
                  <Input placeholder="Password" type="password" />
                  <label>Birthday</label>
                  <Input placeholder="date placeholder" type="date" />
                  <label>Country</label>
                  <CountryDropdown
                    style={{ width: "100%" }}
                    value={"Tunisia"}
                    // onChange={(val) => this.selectCountry(val)}
                  />
                  <Button block className="btn-round" color="danger">
                    Login
                  </Button>
                </Form>
                <div className="forgot">
                  <Button
                    className="btn-link"
                    color="danger"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    Forgot password?
                  </Button>
                </div>
              </Card>
            </Col>
          </Row>
        </Container>
        <div className="footer register-footer text-center">
          <h6>
            © {new Date().getFullYear()}, made with{" "}
            <i className="fa fa-heart heart" /> by Creative Tim
          </h6>
        </div>
      </div>
    </>

我有点惊讶发生这种情况，因为我从未见过 html 元素重叠。但正如我所说，我的前端技能和知识仍在积累中。因此，如果有人可以为此提供解释/解决方案，我将不胜感激。

注意：这是使用 Reactstrap 构建的。

【问题讨论】：

我尝试在实时模板中使用您的表单字段。这就是我看到的snipboard.io/UDHBLu.jpg 你是否更改了任何 css 值？
@KarthickManoharan 不，我只是增加了表单字段的数量。我认为这与模板本身的构建方式有关。
你查看我分享的图片链接了吗？它已经从您的表单中获取了所有字段，但我确实看到页脚与其他元素重叠的问题。你也可以分享一下css吗？
@KarthickManoharan 查看我的回答。我已经解决了

标签： html css twitter-bootstrap bootstrap-4 reactstrap

【解决方案1】：

由于某种原因，当我将反应代码从函数组件更改为有状态组件时，问题消失了：

function RegisterPage() {
  document.documentElement.classList.remove("nav-open");
  React.useEffect(() => {
    document.body.classList.add("register-page");
    return function cleanup() {
      document.body.classList.remove("register-page");
    };
  });
  return (
    <>
      <ExamplesNavbar />
      <div
        className="page-header"
        style={{
          backgroundImage: "url(" + require("assets/img/login-image.jpg") + ")",
        }}
      >
        <div className="filter" />
        <Container>
          <Row>
            <Col className="ml-auto mr-auto" lg="4">
              <Card className="card-register ml-auto mr-auto">
                <h3 className="title mx-auto">Welcome</h3>
                <div className="social-line text-center">
                  <Button
                    className="btn-neutral btn-just-icon mr-1"
                    color="facebook"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-facebook-square" />
                  </Button>
                  <Button
                    className="btn-neutral btn-just-icon mr-1"
                    color="google"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-google-plus" />
                  </Button>
                  <Button
                    className="btn-neutral btn-just-icon"
                    color="twitter"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    <i className="fa fa-twitter" />
                  </Button>
                </div>
                <Form className="register-form">
                  <label>First name</label>
                  <Input
                    placeholder="First name"
                    type="text"
                    onChange={(e) => {
                      console.log(e.target.value);
                    }}
                  />
                  <label>Surname</label>
                  <Input placeholder="Surname" type="text" />
                  <label>Email</label>
                  <Input placeholder="Email" type="text" />
                  <label>Password</label>
                  <Input placeholder="Password" type="password" />
                  <label>Confirm password</label>
                  <Input placeholder="Password" type="password" />
                  <label>Birthday</label>
                  <Input placeholder="date placeholder" type="date" />
                  <label>Country</label>
                  <CountryDropdown
                    style={{ width: "100%" }}
                    value={"Tunisia"}
                    // onChange={(val) => this.selectCountry(val)}
                  />
                  <Button block className="btn-round" color="danger">
                    Login
                  </Button>
                </Form>
                <div className="forgot">
                  <Button
                    className="btn-link"
                    color="danger"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    Forgot password?
                  </Button>
                </div>
              </Card>
            </Col>
          </Row>
        </Container>
        <div className="footer register-footer text-center">
          <h6>
            © {new Date().getFullYear()}, made with{" "}
            <i className="fa fa-heart heart" /> by Creative Tim
          </h6>
        </div>
      </div>
    </>
  );
}

到这里：

export class RegisterPage extends Component {
  constructor() {
    super();
    this.state = {
      email: "",
    };
  }

  render() {
    return (
      <>
        <ExamplesNavbar />
        <div
          className="page-header"
          style={{
            backgroundImage:
              "url(" + require("assets/img/login-image.jpg") + ")",
          }}
        >
          <div className="filter" />
          <Container>
            <Row>
              <Col className="ml-auto mr-auto" lg="4">
                <Card className="card-register ml-auto mr-auto">
                  <h3 className="title mx-auto">Welcome</h3>
                  <div className="social-line text-center">
                    <Button
                      className="btn-neutral btn-just-icon mr-1"
                      color="facebook"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      <i className="fa fa-facebook-square" />
                    </Button>
                    <Button
                      className="btn-neutral btn-just-icon mr-1"
                      color="google"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      <i className="fa fa-google-plus" />
                    </Button>
                    <Button
                      className="btn-neutral btn-just-icon"
                      color="twitter"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      <i className="fa fa-twitter" />
                    </Button>
                  </div>
                  <Form className="register-form">
                    <label>First name</label>
                    <Input
                      placeholder="First name"
                      type="text"
                      onChange={(e) => {
                        console.log(e.target.value);
                      }}
                    />
                    <label>Surname</label>
                    <Input placeholder="Surname" type="text" />
                    <label>Email</label>
                    <Input placeholder="Email" type="text" />
                    <label>Password</label>
                    <Input placeholder="Password" type="password" />
                    <label>Confirm password</label>
                    <Input placeholder="Password" type="password" />
                    <label>Birthday</label>
                    <Input placeholder="date placeholder" type="date" />
                    <label>Country</label>
                    <CountryDropdown
                      style={{ width: "100%" }}
                      value={"Tunisia"}
                      // onChange={(val) => this.selectCountry(val)}
                    />
                    <Button block className="btn-round" color="danger">
                      Login
                    </Button>
                  </Form>
                  <div className="forgot">
                    <Button
                      className="btn-link"
                      color="danger"
                      href="#pablo"
                      onClick={(e) => e.preventDefault()}
                    >
                      Forgot password?
                    </Button>
                  </div>
                </Card>
              </Col>
            </Row>
          </Container>
          <div className="footer register-footer text-center">
            <h6>
              © {new Date().getFullYear()}, made with{" "}
              <i className="fa fa-heart heart" /> by Creative Tim
            </h6>
          </div>
        </div>
      </>
    );
  }
}

【讨论】：