移动版本中的页脚不会走到底部桌面版本似乎还不错-Javascript / ReactJS / CSS

如何解决移动版本中的页脚不会走到底部桌面版本似乎还不错-Javascript / ReactJS / CSS

我对我的项目的CSS有点困惑，每次我尝试调整footer时，它在desktop version中都可以正常工作，但在mobile version中却不能。我面临的问题是页脚不在页面底部，如果我尝试调整页脚的高度，或者如果我更改了bottom to 0，它将使页脚不在桌面上版本(i.e vertical scroll bar appears)，不确定我在这里缺少什么。

任何建议/指针表示赞赏。

注意：我希望保持相对位置，因为随着内容数量的增加，我希望使页脚向下移动。

• Deployed version https://yogaoutlet.herokuapp.com/

• Snippet of Code来自React的页脚组件

  return (
    <div className="footer" style={{ msOverflowY: "hidden" }}>
      <div className="container" style={{ height: "13rem",width: "100vh",minMarginLeft: "0.1%",paddingTop: "1%" }}>
        <div className="row" style={{ display: "inlineFlex",marginTop: "0.5em",width: "100%" }}>
          {/* colum 1 */}
          <div className="col" style={{ maxWidth: "16rem" }}>
            <h4> Yogaoutlet Ltd</h4>
            <ul className="list-unstyled">
              <li>([phone]</li>
              <li> 123 street London road</li>
              <li>London,UK</li>
            </ul>
          </div>

          {/* colum 2 */}

          <div className="col" style={{ maxWidth: "25rem" }}>
            <h4> ABOUT US</h4>
            <ul className="list-unstyled">
              <li> Terms of Use</li>
              <li>Privacy Policy</li>
              <li>Accessibility Statement</li>
            </ul>
          </div>
          {/* colum 3 */}
          <div></div>

          <div className="col" style={{ maxWidth: "45rem",maxMarginLeft: "20%" }}>
            <h4> SIGN UP FOR EMAIL</h4>
            <ul className="list-unstyled">
              <li>For yoga updates,offers,news and promotions</li>
              <li>
                {
                  <form style={{ postion: "block" }} onSubmit={signupEmail} className="input-group">
                    <input
                      type="text"
                      placeholder="Enter here your email"
                      id="forSignupemail"
                      class="form-control inputBlock"
                      name="emailForSignupOnly"
                      value={name}
                      onChange={updatesignupEmail}
                      style={{ maxWidth: "19rem" }}
                    />
                    <ButtonGroup>
                      <Button className="btn buttonBlock" variant="primary" type="submit">
                        SIGNUP
                      </Button>
                    </ButtonGroup>
                  </form>
                }
              </li>
            </ul>
          </div>
        </div>

        <hr style={{ padding: "0",margin: "0" }} />
        <div className="row" style={{ height: "2rem",marginTop: "0" }}>
          <p className="col-sm">@copy;{new Date().getFullYear()} Yogaoutlet Ltd | ALL right reserved | Terms of Service | Privacy</p>
        </div>
      </div>
    </div>
  );
}

-Snippet of CSS页脚

.footer {
  /* margin-top: 1rem; */
  left: 0;
  right: 0;
  grid-area: footer;
  background: rgb(73,79,82);
  color: #ffffff;
  display: inline-block;
  /* align-items: center;
  justify-content: center; */
  position: relative;
  display: flex;
  bottom: 7em;
  height: 14rem;
  padding-bottom: 1rem;

  width: 100%;
  min-width: 480px;
}

• GitHub Code链接以获取完整代码GitHub coder link

-Photo of the mobile version

-after setting bottom=0

解决方法

您可以对页脚使用绝对位置，并将其定位在底部0。身体的高度可以是任意值，但是如果使用bottom: 0，则可以使页脚始​​终位于底部

下面是一个可行的示例

html,body {
   margin:0;
   padding:0;
   height:100%;
}

div {
    outline: 1px solid;
}
#container {
   min-height:100%;
   position:relative;
}
#content {
   height: 1000px; /* Changed this height */
   padding-bottom:60px;
   background: #eee;
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;
   background: lightblue;
}

<div id="container">
   <div id="content">your page content.  set to 1000 px for example</div>
   <div id="footer">Footer will always be at the bottom</div>
</div>

在您的CSS中执行此行，您会看到它有效