Question

我已经创建了一个登录页面，当页面最大化时一切正常但是当我在xs和sm大小的屏幕上时，我的页脚和内容区域在彼此内部并且那里有一个＆＃39; sa底部的差距如何解决这个问题？

完整代码：

＆＃13;

.navbar-default.navbar-fixed-top {
  background-color: #FFFFFF;
  border-color: #E7E7E7;
  font-family: gesta;
  font-size: 20px;
  padding-bottom: 10px;
}
.container.top {
  margin-top: 50px;
}
.navbar-header.topHeader {
  margin-left: 50%;
}
.mid {
  width: 100%;
  height: 497px;
  background-color: #F1F2F4;
  margin-top: 110px
}
.myFooter {
  margin-bottom: 0px;
  width: 100%;
  height: 50px;
  background-color: #2F2F2F;
  border-top: 2px inset #F1F2F4;
}
.formSignIn {
  width: 25%;
  height: 100%;
  margin: 60px auto 30px auto;
}
.form-signin-heading {
  color: #8F95A3;
  font-weight: 400;
}
.btn {
  font-size: 1.1em;
  background-color: #F04B14;
  border: 1px solid #CE3D0D;
  background-color: #f04b14;
  box-shadow: 0px -1px 0px #CE3D0D inset;
  border-radius: 0;
  text-align: center;
}
.btn:hover {
  background-color: #F04B14;
  box-shadow: 0px -1px 0px #CE3D0D inset;
  border: 1px solid #CE3D0D;
  background-color: #F47E57;
}
.forget {
  margin-top: 10px;
  float: right;
}
a {
  font-weight: 400;
  color: #2693CE;
}
a:hover {
  font-weight: 400;
  color: #2693CE;
}
.checkbox {
  display: inline-block;
}
.formSignIn p {
  margin-top: 30px;
  text-align: center;
}
#name {
  text-align: center;
  color: #8F95A3;
  font-family: arial;
  font-weight: 400px;
  font-size: 15px;
}
#bottomLinks a {
  text-decoration: none;
  color: #8F95A3;
  font-family: arial;
  font-weight: 400px;
}
#bottomLinks a:hover,
bottomLinks a:focus,
bottomLinks a:active {
  text-decoration: underline;
  color: #535865;
  font-family: arial;
  font-weight: 400px;
}
.break {
  clear: both;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <!-- Fixed navbar -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container top">
      <div class="navbar-header topHeader">
        <a class="navbar-brand" href="index.html">Logo</a>
      </div>
    </div>
  </nav>

  <div class="container mid">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12">

        <form class="form-signin formSignIn">
          <h4 class="form-signin-heading">Log in</h4>
          <br>
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <label for="inputEmail" class="sr-only">Email address</label>
              <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
              <br>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <label for="inputPassword" class="sr-only">Password</label>
              <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
              <br>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <div class="checkbox">
                <label>
                  <input type="checkbox" value="remember-me">Remember me
                </label>
              </div>
              <div class="forget">
                <a href="">Forgot password?</a>
              </div>
            </div>
          </div>
          <br>
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <p>Not a member yet? <a href="http://www.yahoo.com"> Sign Up</a>
              </p>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <p id="name">© Biz Yapalım <span id="bottomLinks"> <a href="http:/www.google.com">Privacy</a> <a href="http://www.google.com"> Terms</a></span> 
            </div>
          </div>

        </form>
      </div>
    </div>
  </div>
  <div class "break">
  </div>

  <footer class="container myFooter">

  </footer>
  <!--Javascript-->
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>


</body>

＆＃13;

Answer 1

在您的表单上设置width到px或其他一些固定值，因为百分比来自窗口的宽度，并且始终是一个麻烦：

.formSignIn {
    width: 200px; // 25%
}

除此之外，由于您要覆盖更多分辨率，因此可以通过媒体查询设置一些属性，您可以使用%值。

当我在小尺寸的屏幕上时，页脚和容器在彼此内部

1 个答案: