如何在css中设置页眉和页脚？ [复制]答案

【问题标题】：How to set header and footer in css? [duplicate]如何在css中设置页眉和页脚？ [复制]
【发布时间】：2016-11-15 19:47:49
【问题描述】：

我想设置页眉固定在页面顶部和页脚底部。

图片：

索引页面代码：

<!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 将代码更改为绝对位置，并且标题正在滚动。请问有人可以帮我吗？

【问题讨论】：

How to make this Header/Content/Footer layout using CSS? 和 stackoverflow.com/questions/643879/… 可能重复
我认为您以错误的方式使用引导程序，特别是为引导程序的容器类提供宽度。它会在以后的阶段搞砸你的设计。
是的，@hunzaboy。它是下载的项目，我的老板给了我们一个项目来处理它。我能做什么。我的思绪颠倒了。 :(
查看@Borja Alvarez 的答案

标签： html css

【解决方案1】：

我可以看到您正在使用 Bootstrap，您可以使用其中一个模板。

看看这个：

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

关于您的代码的另一点，由于它是 Bootstrap 基础，因此直接修改容器类并不是一个好习惯。

希望这会有所帮助，

问候

【讨论】：

是的，我对我的财产所做的任何更改，布局都没有更改。

【解决方案2】：

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

替换此代码以修复您的页脚

【讨论】：

它没有帮助我。
@Warda 我做了一些修改，请查看。

【解决方案3】：

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

Position: fixed;

或者

Position: bottom;

希望这会有所帮助！

【讨论】：