Question

我想将页眉固定在页面底部和页脚的页脚。

图片：

索引页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Home</title>
          <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
          <link href="custom.css" rel="stylesheet" type="text/css">
        </head>

        <body class="bodyy">

          <div class="container-fluid form">
              <div class="row">
                <div class="col-md-12 llg">
                <img src="image/my-site-planner-logo.png" class="logo" />
              </div>
            </div>
          </div> <!--container ends-->

          <div class="container">
              <div class="row">
              <div class="col-md-3">
              </div>
                  <div class="col-md-6">
                      <form method="post" action="" class="formt">
                          <div class="form-group">
                              <input class="form-control" required="required" placeholder="Enter Email" id="name" name="name" type="email"/>
                          <br />
                    <input class="form-control" id="email" required="required" placeholder="Enter Password" name="password" type="password"/>
                        <br />
                              <button class="btn btn-primary bbt" name="submit-" type="submit">
                              Sign Me In
                            </button>
                      <p class="text-center ttr">
                        Want to Register a New User ?
                      </p>
                    <button class="btn btn-primary bbt" name="submit-" type="submit">
                                <a href="sign-up.html" class="tbb"> 
                        Create Account 
                      </a>
                            </button>
                  </div>
                      </form>
                  </div>
              <div class="col-md-3">
              </div> 
            </div> <!--row ends-->
            </div> <!--container ends-->

          <div class="footer form">
                <h4>
                  &copy; 2016 My Site Planner | All Rights Reserve
                </h4>
              </div>
            </div>
          </div> <!--container ends-->


          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

          <script src="js/bootstrap.min.js"></script>
          <body oncontextmenu="return false">
        </body>
      </html>

css代码：

body{
    margin: 0 auto;
    background-image: url("white-background-1.jpg");
    background-size: 100px 100px,
    background-repeat: no-repeat;
}
.ul{

list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;


}
.container{
    width:  400px;
    height: 400px;
    text-align: center;
    background-color: rgba(0, 255, 255, 0.5);
    border-radius: 4px;
    margin: 0 auto;
    margin-top: 150px;

}



.footer .form {
        margin-top: 100px;
}



table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

我尝试将.footer .form更改为绝对位置和标题滚动的代码。请有人帮帮我吗？

Answer 1

我可以看到你正在使用Bootstrap，你可以使用它的一个模板。

看一下这个：

http://getbootstrap.com/examples/sticky-footer-navbar/

关于你的代码的另一点，它不是一个好的做法直接修改容器类，因为它是一个Bootstrap基础。

希望这有帮助，

此致

Answer 2

.footer .form {
        margin-top: 100px;
        position:fixed;
        bottom:0px;
}

替换此代码以修复页脚

Answer 3

我不是专家，但您可以尝试使用：

Position: fixed;

或者

Position: bottom;

希望这有帮助！

如何在css中设置页眉和页脚？

3 个答案: